úterý 12. listopadu 2013

Telerik Kendo UI tooltip vs JQuery UI tooltip

I had a simple task to show a nicely formatted tooltip when hovering over a DOM element. Tooltip text was static, but formatted with images, hyperlinks etc. There was an extra requirement to get it done on the client (no server side coding if possible -  aspnet webforms is used on this project).

I played a bit with telerik kendo ui tooltip and jquery ui tooltip, the intention of this blog post is to compare them.

 

Kendo UI Tooltip


Kendo UI Web is a commercial package of javascript components from Telerik. Tooltip is only one small widget from the package.
Their tooltip component can in general:
  • show static text as a tooltip (set the content property of tooltip to a simple string)
  • show html page that is dynamically loaded from a server as a tooltip (content property points to url)
  • use built in templating mechanism to render the content of the tooltip (content template has access to DOM elements during rendering) - content property is set to the result of the kendo.template function which returns the final html - the content of tooltip.
All three cases have in common that you need to create somehow a html and put it to the content property of the tooltip. (jquery ui works in a very similar way). I choosed the second option, when I created a html file that is sitting on the server and will be dynamically loaded by the tooltip when a particular event occures on the client. This gives me a freedom of freely compose the html that needs to be displayed (and change it in the future comfortly).

 

Basic setup

You need to include the kendo.web.min.js (734 KB) to the page, this contains the complete kendo ui web package. Maybe this is not what you want, when you need only the tooltip component, here you can find what to include if you want only the tooltip component: http://docs.kendoui.com/getting-started/javascript-dependencies#tooltip

Usage

I start with code snipet:

$('.myContainer').kendoTooltip({
                            filter: 'img', 
                            content : { url : http://myServer/staticHtml.html });

You need to say which elements should show a tooltip and where to look for them. Where to look is specified by a container element, inside this container all elements specified by the filter property will show the tooltip. Tooltip content is specified by the content property, in the example this points to url, which means kendo ui will go to server look for the resource, load it and put it to tooltip.
You can specify additional parameters(as properties on kendoTooltip function) as max width of tooltip, whether to put the tooltip inside an iframe, how to animate the tooltip and others. Here is the link to doumentation: http://docs.kendoui.com/api/web/tooltip

This will show for every img element inside a container with class myContainer a html from the server as a tooltip.
More or less this is it. How the tooltip will look like is entirely specified inside the html.

JQueryUI tooltip


Jquery UI is a set of popular free javascript UI components. Components could be styled with themes (set of theme css). Tooltip is again only a small component inside the package.
Jquery Ui tooltip can in general:
  • show the title attribute of any html dom element as a tooltip - default behaviour.
  • show a html as a tooltip (no built in behaviour for get the html from the server)
  • didn't find templating functionality as in case of kendo ui.
The capabilities of jquery ui tooltip are limited compared to kendo ui. For my intention it is enough, the second option is what I need.

 

Basic setup

You only need to include https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js to the page, again this is for the whole package. Styling could be obtained from https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css this is the smoothness theming stylesheet.

 

Usage

Once again start with the code snippet:

$(document).tooltip({ content: "<html>tooltip content...</html>", 
                                  items: filterSelector, 
                                  hide : 100000 });

You can see that the idea is the same as in case of kendo ui, there is a container (the whole document) inside which all the elements matched by items property will show a tooltip. The content of the tooltip is specified by the html in content property. Jquery ui doesn't support html loading from the server, you need to write it (not a big deal, with $.ajax you can do it quickly, but it is extra work compared to kendo ui), the example has hardcoded html, normally you will have a function call here which gets the html from somewhere.
Jquery ui has less options than kendo ui, I cannot specifiy to not hide the tooltip after i leave from the tooltip (only can specify the timeout after which the tooltip will hide automatically, the positioning of the tooltip looks more complicated comparing to kendo ui (kendo has simple top, bottom etc, jquery ui has positioning through css -> position: { my: "left+15 center", at: "right center" }.
The styling of the tooltip as the max width etc. is done in css too, you should remember that all the tooltips would be placed inside a div.ui-tooltip nd you need to style this div inside your css to set the max width of the tooltip for example 
div.ui-tooltip {
    max-width: 400px;
}
The content of the tooltip is styled inside the html as in case of kendo ui.

How I see it


I enjoyed more the work with kendo ui, it has simpler configuration, clear documentation and more capabilities compared to jquery ui.
Jquery UI is on the other side for free, maybe you already use other components from jquery ui package, the default functionality (showing text property as a tooltip) could be great for simple tooltips, using css you can set a global look for all your tooltips on the site etc.
But still I will choose kendo ui if it is an option.

The result



 
 

Žádné komentáře:

Okomentovat