twitter-bootstrap
Tooltip
Sök…
Anmärkningar
Verktygstippen är ett användargränssnittselement som ser ut som en liten popup-ruta. Det triggas vanligtvis när en användare svävar pekaren över ett annat element utan att klicka på den.
Av prestandaskäl måste verktygstips initialiseras med jQuery. Följande kod aktiverar alla verktygstips i DOM:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Positioneringsverktygstips
Som standard visas verktygstipet ovanpå elementet. Vi kan använda data-placement attribut för att ställa in läget för verktygstips på toppen, botten, vänster eller höger sida av elementet.
<a href="#" data-toggle="tooltip" data-placement="top" title="Top tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Left tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Right tooltip">Hover</a
Vi kan också använda data-placement="auto" att dynamiskt omorientera verktygstipset. Verktygstappen i nästa exempel visar verktygstipen till vänster när det är möjligt, annars kommer det att visa höger.
<a href="#" data-toggle="tooltip" data-placement="auto left" title="To the left?">Hover</a
Grundläggande exempel
För att skapa ett verktygstips behöver vi bara lägga till data-toggle="tooltip" -attribut och en title till HTML-elementet som har verktygstipset. Titelattribut används för att specificera texten som visas i verktygstipset.
<span data-toggle="tooltip" title="Hello world!">Hover over me</span>
