jQuery tooltip plugin

Często podczas pracy, zdarza się potrzeba skorzystania z funkcjonalności, której nie posiadają standardowe biblioteki dostarczone przez platformę .NET. Rozwiązania tego problemu są dwa:

• napisać rozwiązanie samodzielnie
• skorzystać z gotowego rozwiązania

 Ponieważ jestem przeciwnikiem ponownego odkrywania koła, a po doświadczeniach związanych z pracą (i efektami tej pracy) na kontrolkach firmy DevExpress jestem wielkim fanem korzystania z gotowych rozwiązań wielokrotnie zanim samemu zacznę cokolwiek zacznę kodować, sprawdzam, czy taki problem nie został już przez kogoś innego rozwiązany.
Z uwagi na fakt, iż w mojej obecnej firmie, aktualnie nie posiadamy zakupionych komercyjnych kontrolek firm trzecich, to wykorzystujemy wszelkiego rodzaju rozwiązania dostępne za darmo. Przykładem takich kontrolek, są darmowe pluginy do jQuery. Jednym z takich pluginów jest 'jQuery tooltip plugin' udostępniony za darmo na stronie http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/.
Z pluginem tym, spotkałem się w momencie, gdy w jednej z aplikacji, pojawiła się potrzeba dłuższego czasu wyświetlania tooltipa. Opisy pól w tooltipie były na tyle duże, że normalny człowiek w kilka sek. nie był w stanie ich przeczytać.
Rozwiązaniem okazała się darmowa kontrolka, jQuery tooltip plugin, którą tutaj przedstawiam. Główne zalety kontrolki:
- nielimitowany czas wyświetlania tooltipa
- możliwość schowania tooltipa w momencie wystąpienia zdarzenia jQuery (podpięcie 'schowania' pod event)
- tooltip oraz jego zawartość określana za pomocą edytowalnej klasy CSS
- możliwość umieszczania obrazków, 'image map' oraz linków w tooltipie.
- bardzo łatwa obsługa podpinania komponentu do istniejących rozwiązań (plugin przechwytuje istniejącego tooltipa i się pod niego podszywa).
- licencja MIT pozwalająca na darmowe, komercyjne zastosowanie kontrolek


Samo podpięcie nowego, lepszego tooltipa, do istniejącego rozwiązania z tooltipami jest banalnie proste. Potrzebujemy:

• dodać do naszego projektu pliki *.js z biblioteką jQuery oraz "jQuery tooltip plugin"
• umieścić referencje do tych plików, na stronach, na których będziemy się do nich odwoływać (zazwyczaj takie rzeczy umieszcza się w master page)
• utworzyć nową "pustą" klasę CSS, która będzie nam służyła jako "wskaźnik", dla każdego typu tooltipa (osobny css dla "obrazków", osobny dla "zwykłego tekstu" itp.)
• dodać referencje do pliku *.css w którym znajduje się nasz znacznik, na stronie, na której będziemy korzystać z tego pluginu (zazwyczaj takie rzeczy umieszcza się w master page)
•  do każdego obiektu, w którym ma być użyty extra tooltip, dołożyć klasę css odpowiedniego typu
• upewnić się, że pliki posiadają wypełnioną właściwość "tooltip" (kontrolki asp.net) lub 'title' (kontrolki html).
• przy uruchamianiu strony, wywołać skrypt aktywujący jQuery plugin tooltip

Na pierwszy rzut oka wydaje się tego sporo, ale w praktyce 90% z tych rzeczy powinno być już "zrobione" wcześniej (tooltipy w kontrolkach, pliki js osobno, pliki css osobno, do tego jakiś master page, z referencjami do tych plików).

Przykładowa kontrolka, z tooltipem wygląda tak:

<asp:TextBox ID="txtHelper" runat="server" ToolTip="tooltipHelper" CssClass="cssHelper"></asp:TextBox>

 Natomiast skrypt, aktywujący tooltipy dla każdego obiektu, który posiada klasę CSS o nazwie "cssHelper" wygląda tak:

    $("document").ready(function () {
        var objs = $(".cssHelper");

        jQuery.each(objs, function () {
            $("#" + this.id).tooltip();
        });
    });

P.S. Zachęcam do zapoznania się z projektem. Więcej przykładów znajduje się na stronie projektu w zakładce demo.

Edit:
Aby zrobić "multiline", czy też "page break" to należy:

                $('#selector').tooltip({
                    content: function () {
                        return $(this).attr('title');
                    }
                });

I dzięki temu, w tooltipie można skorzystać z  <br>