Tworzenie Tooltips z wykorzystaniem Bootstrap

Czas czytania: < 1 minut

Zapewne nie wszyscy słyszeli czym jest Tooltip chociaż prawie każdy przynajmniej kilka razy spotkał go na jakiejś stronie internetowej.

Czym są Tooltips – czyli z czym to się je

Tooltip lub Tooltips (w liczbie mnogiej) to pojawiająca się po najechaniu na obiekt dodatkowa informacja dla użytkownika. Dodany on może być do dowolnego element HTML.

Przykładowy Tooltip w Bootstrap:

Tooltip może być wyświetlony w różnych miejscach

Powyższy przykłady wyglądają tak w kodzie:







Podobnie jak w przypadku przycisków po dowolny obiekt może zyskać efekt Tooltip jeśli doda się do niego odpowiednie klasy.

Na koniec dodajemy jeszcze poniższy kod js:

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>

Oczywiście by wszystko działało trzeba na początek umieścić na stronie biblioteki Bootstrap.

Demo

Źródło: http://www.w3schools.com/css/css_tooltip.asp
http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp