wszystkie wpisy

jQuery tooltip plugin

01.08.2012
devexpressjavascriptjQueryplugintooltipX11

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