Tworzenie Tooltips z wykorzystaniem Bootstrap

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 on left

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

Tooltip on top

Tooltip on bottom

Tooltip on right

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

Tooltip on left

Tooltip on top

Tooltip on bottom

Tooltip on right

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