Bootstrap Tooltips

BY admin
|
Advertisements

I den här handledningen lär du dig hur man skapar verktygstips med Bootstrap.

Skapa verktygstips med Bootstrap

En verktygstips är ett litet popup-fönster som visas när användaren placerar muspekaren över ett element, t.ex. en länk eller knappar, för att ge tips eller information om elementet som hålls över.

Tooltips kan vara till stor hjälp för nya besökare på din webbplats eftersom de gör det möjligt för användaren att känna till syftet med ikoner och länkar genom att placera muspekaren över dem.

Steg 1: Lägga till Tooltip-markeringen

För att skapa en tooltip måste du lägga till data-toggle="tooltip"-attributet till ett element. Tolltip-text som skulle visas vid hover kan anges med attributet title.

Här är standardmarkeringen för att lägga till en tolltip till en hyperlänk.

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

På samma sätt kan du lägga till verktygstips till andra element som knappar, ikoner osv.

Notera: Av prestandaskäl är tooltip data-apis opt in, vilket innebär att om du vill använda tooltips måste du initialisera dem själv med tooltip() metoden.

Steg 2: Utlösa verktygstipsen

Tooltips kan utlösas via JavaScript – anropa bara tooltip() Bootstrap-metoden med id, class eller någon CSS-selektor för målelementet i din JavaScript-kod.

Du kan antingen initiera verktygstipsen individuellt eller alla på en gång. Följande jQuery-kod initialiserar alla verktygstips på en sida genom att välja dem med hjälp av deras data-toggle-attribut.

Exempel

Prova den här koden ” 

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

– Utgången av ovanstående exempel kommer att se ut ungefär så här:

Inställning av riktningar för verktygstips

Du kan ställa in att verktygstipsen ska visas på över-, höger-, under- och vänstersidan av ett element.

Positionering av verktygstips via dataattribut

Med följande exempel visas hur du ställer in riktningen för verktygstips via dataattribut.

Positionering av verktygstips via JavaScript

Följande exempel visar hur du ställer in riktningen för verktygstips via JavaScript.

Optioner

Det finns vissa alternativ som kan överföras till tooltip() Bootstrap-metoden för att anpassa funktionaliteten hos tooltip-pluginet.

Namn Typ Standardvärde Beskrivning
animation boolean true Applicera en CSS-övergång för att bleka ut tooltip:n.
html boolean false Insätt html i verktygstipsen. Om det är falskt används jQuerys text()-metod för att infoga innehåll i DOM. Använd text om du är orolig för XSS-attacker.
placering sträng | funktion ’top’ Inställer positionen för verktygstipsen – uppåt | nedåt | vänster | höger | auto. När värdet ”auto” anges kommer verktygstipsen att omorienteras dynamiskt.
selector string false Om en selektor anges kommer verktygstipsobjekt att fästas vid de angivna målen.
title string | function ” Sätter standardvärdet title om attributet title inte finns.
trigger string ’hover focus’ Specificera hur tooltip utlöses – klick | hover | focus | manual. Observera att du kan skicka flera utlösartyper, separerade med mellanslag.
delay number | object 0

Tid för fördröjning av visning och döljning av verktygstipsen (ms) – gäller inte för manuell utlösartyp.

Om ett nummer anges tillämpas fördröjningen både på att dölja och visa Objektstrukturen är:
delay: { show: 500, hide: 100 }
container string | false false Lägger till verktygstipsen på ett specifikt element. container: 'body'
mall sträng

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

Bas-HTML som ska användas när verktygstipsen skapas. Tooltipens titel kommer att infogas i elementet med klassen .tooltip-inner och elementet med klassen .tooltip-arrow blir tooltipens pil.

Det yttersta omslagselementet ska ha klassen .tooltip.
viewport string | object { selector: 'body', padding: 0 } Håller verktygstipsen inom ramen för detta element. Exempel: viewport: '#viewport' eller { selector: '#viewport', padding: 0 }
offset nummer | sträng 0 Offset för verktygstipsen i förhållande till målet.
fallbackPlacement string | array ’flip’ Möjlighet att ange vilken position Popper ska använda vid fallback.
boundary string | element ’scrollParent’ Overflow constraint boundary of the tooltip. Accepterar värdena 'viewport', 'window', 'scrollParent' eller en HTMLElement-referens (endast JavaScript).
sanitize boolean true Aktivera eller inaktivera sanitization. Om aktiverat kommer alternativen ”template” och ”title” att sanitiseras.
whiteList object value Objekt som innehåller tillåtna attribut och taggar.
sanitizeFn null | function null Gör det möjligt att ange en egen sanitize-funktion.

Du kan ställa in de här alternativen antingen genom att använda dataattribut eller JavaScript. För att ställa in tooltips-alternativen via dataattribut är det bara att lägga till alternativnamnet till data- tillsammans med rätt värde, till exempel data-animation="false", data-placement="bottom" etc.

Såväl är JavaScript det bättre sättet att ställa in dessa alternativ, eftersom det förhindrar att du behöver arbeta flera gånger. Se tooltip-metoden $().tooltip(options) i avsnittet nedan för att veta hur du ställer in alternativen för tooltips med hjälp av JavaScript.

Metoder

Det här är Bootstraps standardmetoder för tooltip:

$().tooltip(options)

Denna metod fäster tooltip-hanteraren till en grupp av element. Den gör det också möjligt att ställa in alternativen för verktygstipsen, så att du kan anpassa dem efter dina behov.

Med följande exempel infogas den angivna texten i verktygstipsen om värdet för attributet title utelämnas eller saknas i de valda elementen:

Med följande exempel visas hur du placerar HTML-innehållet i en verktygstips:

Med följande exempel visas hur du kan styra tidpunkten för visning och döljning av verktygstipsen med hjälp av verktygstipsens delay alternativ via JavaScript.

Följande exempel visar hur du kan skapa en egen anpassad mall för Bootstraps verktygstips i stället för att använda standardmallen.

Följande exempel infogar den dynamiskt genererade HTML-koden för verktygstipsen i slutet av ett .wrapper-element i stället för <body>-elementet.

Notera: Att åsidosätta verktygstipsens standardvärde för container-alternativet ger ingen synlig skillnad på sidan. För att se det faktiska resultatet måste du inspektera den resulterande DOM:n med hjälp av Firebug- eller Developer-verktygen.

På samma sätt kan du ställa in andra alternativ för verktygstipsen med hjälp av $().tooltip(options)-metoden. Låt oss kolla in de andra metoderna i Bootstrap tooltip plugin.

.tooltip(’show’)

Denna metod visar ett elements tooltip.

Exempel

Prova den här koden ” 

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

.tooltip(’hide’)

Denna metod döljer ett elements tooltip.

Exempel

Prova den här koden ” 

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

.tooltip(’toggle’)

Denna metod växlar ett elements tooltip.

Exempel

Prova den här koden ” 

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

.tooltip(’dispose’)

Denna metod döljer och förstör ett elements tooltip.

.tooltip(’enable’)

Denna metod ger ett elements tooltip möjlighet att visas. Tooltips är aktiverade som standard.

Exempel

Prova den här koden ” 

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

.tooltip(’disable’)

Denna metod tar bort möjligheten för ett elements tooltip att visas. Tooltip kommer endast att kunna visas om den aktiveras igen.

.tooltip(’toggleEnabled’)

Denna metod växlar möjligheten för ett elements tooltip att visas eller döljas.

.tooltip(’update’)

Denna metod uppdaterar positionen för ett elements tooltip.

Exempel

Prova den här koden ” 

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

Händelser

Bootstraps tooltip-klass innehåller ett fåtal händelser för att ansluta till tooltip-funktionen.

Händelse Beskrivning
show.bs.tooltip Denna händelse utlöses omedelbart när show-instansmetoden kallas.
shown.bs.tooltip Denna händelse utlöses när verktygstipsen har gjorts synlig för användaren. Den väntar tills CSS-övergångsprocessen är helt avslutad innan den utlöses.
hide.bs.tooltip Denna händelse utlöses omedelbart när instansmetoden hide har anropats.
hidden.bs.tooltip Denna händelse utlöses när verktygstipsen har slutat döljas för användaren. Den väntar tills CSS-övergångsprocessen är helt klar innan den utlöses.
inserted.bs.tooltip Denna händelse utlöses efter show.bs.tooltip-händelsen när verktygstipsmallen har lagts till i DOM.

Med följande exempel visas ett varningsmeddelande till användaren när övergången från fade out till fade out för verktygstipsen är helt avslutad.