Opisy w chmurce

Chcąc dodać opis do jakiegoś elementu na stronie (np. skróty lub pojęcia, które nie muszą być znane każdemu internaucie) warto rozpatrzyć kilka możliwości:

W tej poradzie postaram się pokazać oba. Drugi później odpowiednio rozwinę.

Atrybut title

Jest częścią standardu HTML. Po prost dodajemy do znacznika atrybut z wartością. Po najechaniu nad element pokaże się mała chmurka.

Dawniej

Kiedyś IE 6 błędnie używał do tego celu atrybutu alt dla znaczników <img/>.

Własny mechanizm

Wykorzystam dwa zdarzenia: mouseover i mouseout. Odpowiednio dodając do DOM-u nowy węzeł, lub go usuwając. Można zoptymalizować i jedynie ukrywać. Ale to ma być prosty przykład.

<html>
<head>
    <title>Przykład jQuery</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#a').mouseover(function() {
            $('<span class="bubble">').html('opis').appendTo($(this));
        }).mouseout(function() {
            $(this).find('span.bubble').remove();
        });
    });
    </script>
    <style type="text/css">
        #a   { position: relative; }
        #a span.bubble   {
            position: absolute;
            top: 20px;
            left: 0;
            width: 180px;
            padding: 10px;
            border: 1px solid #000;
            line-height: 30px;
            background: #fff;
        }
    </style>
</head>
<body>
    <p id="a">To jest mój napis</p>
</body>
 
</html>

Ulepszenie?

Wszystko niby wygląda ok, ale jednak jest to trochę kodu... No i te id węzła zaszyte w kodzie $('#a')... Nieładnie. A może zrobić z tego wtyczkę jQuery? Czemu nie. Jednak to jest temat na osobny artykuł :)