Logo Luan Morina
Demonstrim i tooltip-it me HTML
A e dini ju se ne hamë më shumë mollë se çdo frutë tjetër. Por a e dinit gjithashtu se mollat nga vetëshërbimet nuk janë të freskëta.

Çka është tooltip dhe si mund të përdoret ai?

Kliko këtu për sqarim.

HTML

<div class="mbajtesi-me-demonstrim">
<div class="mbajtesi-me-mbishkrim">
<i class="fa-solid fa-lightbulb fa-pull-left"></i>
A e dini ju se ne hamë më shumë mollë se çdo frutë tjetër. Por a e dinit gjithashtu se mollat nga 
<span class="teksti-i-hapjes" 
data-bs-toggle="tooltip" 
data-bs-html="true" 
data-bs-title="<div class='permbajtja-popover'>
<p><img src='mollat-vetesherbim.jpg' alt='' class='mbajtesi-me-mbishkrim-imazhi' /></p>
<p>Mollat e vetëshërbimeve zakonisht mbulohen me dyll, thahen në ajër të nxehtë dhe dërgohen në ruajtje të ftohtë. Pas gjashtë deri në dymbëdhjetë muaj, ato më në fund zbarkojnë në raftet e dyqaneve ushqimore.</p></div>">vetëshërbimet</span> nuk janë të freskëta. 
</div> 
</div>

CSS

.mbajtesi-me-mbishkrim-imazhi {
  height: 60px;
  width: 60px;
  border: 4px solid #fff;
  border-radius: 100%;
  margin-top: 14px;
}

.teksti-i-hapjes {
  color: #FFFFFF;
  border-bottom: 1ox dashed #FFFFFF;
  cursor: help;
}

.permbajtja-popover p {
  margin: 4px 0 14px 0;
  line-height: 1em;
}

JS

<script>
$(function() {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
})
</script>
   Tooltip me përmbajtje HTML