Bootstrap

Popover

Për çka dhe si përdoret Popover?

Popover mund të përdoret për informatë shtuese për vizitorin e faqes, për shembull kur e vendos ai treguesin e tij mbi një element të faqes së uebit. Nëse nuk është caktuar në kod se a hapet popover mbi, në anën e djathtë, poshtë ose në anën e majtë të një elementi në faqe, atëherë ai hapet në pjesën e epërme ose në pjesën më të përshtatshme nga pozita e elementit në faqe.

Demonstrim i tregimit pas vendosjes së treguesit mbi përmbajtje

POPOVER MBI PËRMBAJTJE
HTML
<div><span class="pop-over-demonstrim" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Kjo është përmbajtja e popover-it e cila hapet (në anën më të përshtatshme të elementit) dhe e cila mbyllet pas largimit nga përmbajtja.">POPOVER MBI PËRMBAJTJE</span></div>

Demonstrim

POPOVER ME KLIKIM
HTML
<div style="padding: 2em 0;"><span class="pop-over-demonstrim" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="click" data-bs-content="Kjo është përmbajtja e popover-it e cila hapet (në anën më të përshtatshme të elementit) dhe e cila mbyllet pas klikimit.">POPOVER ME KLIKIM</span></div>
JS
<script language="javascript">
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
}) 
</script>

Pozita e hapjes

lartë: data-bs-placement="top"
në anën e djathtë: data-bs-placement="right"
poshtë: data-bs-placement="bottom"
në anën e majtë: data-bs-placement="left"