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.
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#tooltipUsage
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.
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;
}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
