Bootstrap 4 Popover
Bootstrap 4 Popover
Die Popover-komponent is soortgelyk aan tooltips; dit is 'n pop-up boks wat verskyn wanneer die gebruiker op 'n element klik. Die verskil is dat die popover baie meer inhoud kan bevat.
Wissel popoverHoe om 'n popover te skep
Om 'n popover te skep, voeg die data-toggle="popover"
kenmerk by 'n element.
Gebruik die titlekenmerk om die kopteks van die opspringer te spesifiseer, en gebruik die data-contentkenmerk om die teks te spesifiseer wat in die opspringer se liggaam vertoon moet word:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Let wel: Popovers moet geïnisialiseer word met jQuery: kies die gespesifiseerde element en roep die popover()metode.
Die volgende kode sal alle popovers in die dokument aktiveer:
Voorbeeld
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Posisionering van Popovers
By verstek sal die popover aan die regterkant van die element verskyn.
Gebruik die data-placementkenmerk om die posisie van die pop-over bo-, onder-, linker- of regterkant van die element te stel:
Voorbeeld
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Let wel: Die plasingskenmerke werk nie soos jy verwag as dit nie genoeg plek daarvoor is nie. Byvoorbeeld: as jy die boonste plasing aan die bokant van 'n bladsy gebruik (waar dit nie plek daarvoor is nie), sal dit eerder die opspringer onder die element of aan die regterkant vertoon (waar dit ook al plek is).
Sluiting Popovers
By verstek word die popover gesluit wanneer jy weer op die element klik. U kan egter die data-trigger="focus"kenmerk gebruik wat die popover sal sluit wanneer u buite die element klik:
Voorbeeld
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Wenk: As jy wil hê die popover moet vertoon word wanneer jy die muiswyser oor die element beweeg, gebruik die data-triggerkenmerk met 'n waarde van "sweef":
Voorbeeld
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Voltooi Bootstrap Popover-verwysing
Vir 'n volledige verwysing van alle popover-opsies, -metodes en -geleenthede, gaan na ons Bootstrap JS Popover-verwysing .