Toltip w HTML - ballon z podpowiedzią

To jest etykietka stylu balon, który może być zastosowany do dowolnego odnośnika na stronie. To co odróżnia go od innych zastosowań toltipa, to sposób w jaki pobiera etykietkę wiadomości - od zwykłych elementów DIV zawierającej żądaną zawartość podpowiedzi. Fakt ten oznacza, że ​​można łatwo zdefiniować podpowiedzi jako HTML i jako obraz np .gif, czy .jpg. Innymi słowy, wszelkie treści mogą teraz łatwo się wyświetlać jako komunikat z podpowiedzią.

Tooltip obsługuje opcjonalny obraz strzałki, który jako tooltip, dynamicznie dostosowuje się do wszystkich czterech rogów okna przeglądarki.

balloontip.js i plik stylów balloontip.css

przy obrazakach również pliki .js i .css potrzebne do zdefiniowania i wyświetlania toltipa.

A oto kod do sekcji HEAD:

<link rel="stylesheet" type="text/css" href="/balloontip.css" />

<script type="text/javascript" src="/balloontip.js">

/***********************************************
* Rich HTML Balloon Tooltip- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

I kod wywołania toltipa w pliku HTML w sekcji BODY:

<!--Sample links-->

<a href="http://www.dynamicdrive.com/style/" rel="balloon1">Dynamic Drive CSS Library</a><br /><br />
<a href="http://www.javascriptkit.com" rel="balloon2">JavaScript Kit</a>

<!--Sample corresponding tooltips-->

<div id="balloon1" class="balloonstyle">
<img src="/shadetabs.gif" style="float: right; margin-left: 5px; border:1px solid black" />Original, practical CSS codes and examples such as CSS menus to give your site a visual boast!
</div>

<div id="balloon2" class="balloonstyle" style="width: 350px; background-color: lightyellow">
Award winning JavaScript tutorials and over 400+ free scripts.
</div>

Zobacz jak to wygląda i jak działa TUTAJ - przykład ze strony DynamicDrive