Hvordan lage og plassere en verktøytips i bootstrap 5
ToolTip er en liten popup -boks som vises når en bruker flytter markøren over en knapp eller en lenke som gir brukeren, kunnskapen eller et hint om den spesifikke knappen eller lenken. Verktøytips er nyttige for de nye brukerne av et nettsted for å lagre dem fra forvirring eller noe slags problem mens du utforsker nettstedet ditt.
Denne artikkelen vil lære deg om
- Opprette verktøytips i Bootstrap 5
- Posisjonsverktøytips
Hvordan lage verktøytips
For å opprette en verktøytip -bruk, dataattributt “Data-BS-Toggle = ”ToolTip”I din Tag eller tag og teksten som vises i verktøytips må skrives ved hjelp av tittelattributtet.
ToolTip med lenke
Plasser markøren her
Verktøytips med knapp
$ (dokument).klar (funksjon ()
$ ('[data-bs-toggle = "tooltip"]').verktøytip ();
);
La meg nå fortelle deg at i Bootstrap 5 for å opprette en verktøytips må vi legge til dataattributter i Tag eller tag og skriv også en jQuery for å aktivere det. Så jeg bryter skapelsesprosessen i trinn som vil gi deg bedre forståelse.
Trinn
Å lage en verktøytips i Bootstrap 5 er en enkel to -trinns prosess
Trinn 1: Legg til Data-BS-Toggle = ”ToolTip” og title = ”ToolTip Text Goes Here” attributter i din eller tag.
ToolTip med lenke
Plasser markøren her
Verktøytips med knapp
Steg 2: Aktiver verktøytips ved å skrive jQuery etter kode
Posisjonering av verktøytips
Så for å plassere en verktøytips som ditt krav bare Legg til data-bs-plassering = ”Topp/høyre/venstre/bunn” attributt til din eller tag For å endre verktøytipsposisjon.
Konklusjon
Verktøytips opprettes ved å legge til Data-BS-Toggle = ”ToolTip” og title = ”ToolTip Text Goes Here” attributter i eller tag og aktiver det ved å skrive en JavaScript -kode. For posisjonering bare Legg til data-BS-plassering = ”Topp/bunn/høyre/venstre” attributt til eller tag.