Bootstrap Tooltips

BY admin
|

I denne vejledning lærer du, hvordan du opretter værktøjstip med Bootstrap.

Skabelse af tooltips med Bootstrap

En tooltip er en lille pop-up, der vises, når brugeren placerer musemarkøren over et element som f.eks. et link eller knapper for at give et hint eller oplysninger om det element, der svæver over.

Tooltips kan være meget nyttige for nye besøgende på dit websted, fordi de gør det muligt for brugeren at kende formålet med ikoner og links ved at placere musemarkøren over dem.

Stræk 1: Tilføjelse af tooltip-markup

For at oprette et tooltip skal du tilføje data-toggle="tooltip"-attributten til et element. Tolltip-tekst, der skal vises ved hover, kan angives ved hjælp af attributten title.

Her er standardmarkupen for tilføjelse af et tolltip til et hyperlink.

<a href=”#” data-toggle=”tooltip” title=”Some text”>Hover me</a>

Sådan kan du tilføje tooltips til de andre elementer såsom knapper, ikoner osv.

Bemærk: Af hensyn til ydeevnen er tooltip-data-apis opt in, dvs. for at bruge tooltips skal du selv initialisere dem med tooltip()-metoden.

Stræk 2: Udløsning af tooltips

Tooltips kan udløses via JavaScript – du skal blot kalde tooltip() Bootstrap-metoden med id, class eller en hvilken som helst CSS-selektor for målelementet i din JavaScript-kode.

Du kan enten initialisere tooltips enkeltvis eller alle på én gang. Den følgende jQuery-kode initialiserer alle tooltips på en side ved at vælge dem ved hjælp af deres data-toggle-attribut.

Eksempel

Prøv denne kode ” 

<script>$(document).ready(function(){ $('').tooltip(); });</script>

– Outputtet af ovenstående eksempel vil se nogenlunde sådan her ud:

Indstilling af retninger for værktøjstip

Du kan indstille værktøjstip til at blive vist i toppen, højre, bunden og venstre side af et element.

Positionering af værktøjstip via dataattributter

Det følgende eksempel viser dig, hvordan du kan indstille retningen for værktøjstip via dataattributter.

Positionering af værktøjstip via JavaScript

Det følgende eksempel viser dig, hvordan du indstiller retningen af værktøjstip via JavaScript.

Optioner

Der er visse indstillinger, som kan overføres til tooltip() Bootstrap-metoden for at tilpasse funktionaliteten af værktøjstip-plugin’et.

Tilfører tooltip til et bestemt element container: 'body'

Navn Type Standardværdi Beskrivelse
animation boolean true Anvend en CSS-fadeovergang på tooltip’en.
html boolean false Indsæt html i tooltip’et. Hvis falsk, bruges jQuerys text()-metode til at indsætte indhold i DOM’en. Brug tekst, hvis du er bekymret for XSS-angreb.
placering string | function ‘top’ Sætter positionen for tooltip’et – top | bund | venstre | højre | auto. Når værdien “auto” er angivet, vil tooltip’en blive dynamisk omorienteret.
selector string false Hvis der er angivet en selector, vil tooltip-objekter blive knyttet til de angivne mål.
title string | function ” Sætter standardværdien title, hvis title-attributten ikke er til stede.
trigger string ‘hover focus’ Specificer, hvordan tooltip udløses – klik | hover | fokus | fokus | manuelt. Bemærk, at du kan videregive flere udløsertyper, adskilt af mellemrum.
delay number | object 0

Tid til forsinkelse af visning og skjul af værktøjstip (ms) – gælder ikke for manuel udløsertype.

Hvis der angives et tal, anvendes forsinkelsen på både skjule/vise Objektstrukturen er:
delay: { show: 500, hide: 100 }
container string | false false
template string

'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML, der skal bruges, når tooltip’et oprettes. Værktøjstippets titel indsættes i elementet med klassen .tooltip-inner, og elementet med klassen .tooltip-arrow bliver værktøjstippets pil.

Det yderste wrapper-element skal have klassen .tooltip.
viewport string | object { selector: 'body', padding: 0 } Holder tooltip inden for rammerne af dette element. Eksempel: viewport: '#viewport' eller { selector: '#viewport', padding: 0 }
offset tal | string 0 Offset af tooltip’et i forhold til målet.
fallbackPlacement string | array ‘flip’ Giver dig mulighed for at angive, hvilken position Popper skal bruge ved fallback.
boundary string | element ‘scrollParent’ Overflow constraint boundary of the tooltip. Accepterer værdierne 'viewport', 'window', 'scrollParent' eller en HTMLElement-reference (kun JavaScript).
sanitize boolean true Aktiverer eller deaktiverer sanitiseringen. Hvis aktiveret vil ‘template’ og ‘title’-indstillingerne blive sanitized.
whiteList object object value Objekt, som indeholder tilladte attributter og tags.
sanitizeFn null | funktion null Giver dig mulighed for at angive din egen sanitize-funktion.

Du kan indstille disse indstillinger enten ved hjælp af dataattributter eller JavaScript. Hvis du vil indstille tooltips-indstillingerne via dataattributter, skal du blot tilføje navnet på indstillingen til data- sammen med den korrekte værdi, f.eks. data-animation="false", data-placement="bottom" osv.

Men JavaScript er den mere foretrukne måde at indstille disse indstillinger på, da det forhindrer dig i at arbejde gentagne gange. Se tooltip-metoden $().tooltip(options) i afsnittet nedenfor for at vide, hvordan du indstiller indstillingerne for tooltips ved hjælp af JavaScript.

Metoder

Dette er Bootstraps standard tooltip-metoder:

$().tooltip(options)

Denne metode knytter tooltip-handleren til en gruppe af elementer. Den giver dig også mulighed for at indstille indstillingerne for værktøjstipsene, så du kan tilpasse dem efter dine behov.

Det følgende eksempel indsætter den angivne tekst inde i værktøjstipsene, hvis værdien af attributten title er udeladt eller mangler i de valgte elementer:

Det følgende eksempel viser dig, hvordan du placerer HTML-indholdet inde i et værktøjstip:

Det følgende eksempel viser dig, hvordan du via JavaScript styrer timingen af visning og skjul af værktøjstip ved hjælp af værktøjstips delay-indstillingen i værktøjstipset.

Det følgende eksempel viser dig, hvordan du kan oprette din egen brugerdefinerede skabelon til Bootstrap-værktøjstips i stedet for at bruge standardskabelonen.

Det følgende eksempel indsætter den dynamisk genererede HTML-kode for værktøjstipset i slutningen af et .wrapper-element i stedet for <body>-elementet.

Bemærk: Det giver ingen synlig forskel på siden at tilsidesætte tooltippens standardværdi container for indstilling. For at se det faktiske resultat skal du inspicere den resulterende DOM ved hjælp af Firebug- eller Developer-værktøjerne.

Sådan kan du indstille andre indstillinger for tooltips ved hjælp af $().tooltip(options)-metoden. Lad os se de andre metoder i Bootstrap tooltip-plugin’et.

.tooltip(‘show’)

Denne metode afslører et elements tooltip.

Eksempel

Prøv denne kode ” 

<script>$(document).ready(function(){ $(".show-tooltip").click(function(){ $("#myTooltip").tooltip('show'); }); });</script>

.tooltip(‘hide’)

Denne metode skjuler et elements tooltip.

Eksempel

Prøv denne kode ” 

<script>$(document).ready(function(){ $(".hide-tooltip").click(function(){ $("#myTooltip").tooltip('hide'); }); });</script>

.tooltip(‘toggle’)

Denne metode skifter et elements tooltip.

Eksempel

Prøv denne kode ” 

<script>$(document).ready(function(){ $(".toggle-tooltip").click(function(){ $("#myTooltip").tooltip('toggle'); }); });</script>

.tooltip(‘dispose’)

Denne metode skjuler og ødelægger et elements tooltip.

.tooltip(‘enable’)

Denne metode giver et elements tooltip mulighed for at blive vist. Tooltips er aktiveret som standard.

Eksempel

Prøv denne kode ” 

<script>$(document).ready(function(){ $(".enable-tooltip").click(function(){ $("#myTooltip").tooltip('enable'); }); });</script>

.tooltip(‘disable’)

Denne metode fjerner muligheden for, at et elements tooltip kan vises. Tooltippen vil kun kunne vises, hvis den aktiveres igen.

.tooltip(‘toggleEnabled’)

Denne metode skifter muligheden for, at et elements tooltip kan vises eller skjules.

.tooltip(‘update’)

Denne metode opdaterer positionen for et elements tooltip.

Eksempel

Prøv denne kode ” 

<script>$(document).ready(function(){ $(".update-tooltip").click(function(){ $("#myTooltip").tooltip('update'); }); });</script>

Events

Bootstraps tooltip-klasse indeholder få events til at koble sig til tooltip-funktionaliteten.

Event Beskrivelse
show.bs.tooltip Denne hændelse udløses straks, når show-instansmetoden kaldes.
shown.bs.tooltip Denne hændelse udløses, når tooltip’en er blevet gjort synlig for brugeren. Den venter, indtil CSS-overgangsprocessen er helt afsluttet, før den udløses.
hide.bs.tooltip Denne hændelse udløses straks, når instansmetoden hide er blevet kaldt.
hidden.bs.tooltip Denne hændelse udløses, når tooltip’en er færdig med at blive skjult for brugeren. Den venter, indtil CSS-overgangsprocessen er helt afsluttet, før den udløses.
inserted.bs.tooltip Denne hændelse udløses efter show.bs.tooltip-hændelsen, når tooltip-skabelonen er blevet tilføjet til DOM’en.

Det følgende eksempel viser en advarselsmeddelelse til brugeren, når overgangen til udblænding af tooltip’en er helt afsluttet.