New Kendo UI Widget: The Tooltip

They were later made ubiquitous by Microsoft as an integral part of the Office 95 Toolbars. This is where the "balloon help" became the "Tooltip". The rest, as they say, is history.

The Tooltip Today

In modern web applications, the Tooltip is an extremely powerful way of embedding extra information or content into an element of reduced size. The Kendo UI Tooltip displays a popup hint for a given HTML element with a callout. It can be used to show plain text, HTML, and even dynamic content that is loaded in when the tooltip is opened.

Many widgets, such as the Kendo UI Slider, already have a tooltip built in.  We've now promoted that Tooltip to a proper widget that you can use on your own elements.

Creating a basic Kendo UI Tooltip is easy. Simply select which item you want to have a tooltip, and then set the content you want displayed.

<img id="clippy" src="img/clippy.jpeg"></img>

<script>
  $("#clippy").kendoTooltip({ "Have You Missed Me?!?" });
</script>

Interactive Sample

By default, the Tooltip shows at the bottom. You can move it around by specifying it's position property. Your choices are...

• top
• bottom
• left
• right
• center

<img id="clippy" src="http://www.kendoui.com/images/default-source/blog-images/clippyECE846D0DF26.png">

<script>
  (function ($) {

    $("#clippy").kendoTooltip({ 
      content: "Do you miss me?!?",
      position: "top"  
    });

  }(jQuery));
</script>

Note that in my tests, the tooltip won't show up at the top if there isn't room for it. It's smart enough to know that and stay where it is at the bottom.

You can also show HTML in the tooltip. You can inline the HTML in the content attribute, but it's cleaner to use a template.

<img id="clippy" src="http://www.kendoui.com/images/default-source/blog-images/clippyECE846D0DF26.png">

<script type="text/x-kendo-template" id="template">
  <h3>Hey, it's my dog!</h3>
  <img src="http://www.kendoui.com/images/default-source/blog-images/dog.jpg" >
</script>

<script>

  (function ($) {
    // render the template as the content of the tooltip    
    $("#clippy").kendoTooltip({ 
      content: kendo.template($("#template").html()),
      position: "right"  
    });

  }(jQuery));

</script>

Interactive Sample

Animation

You can also control the animation of the tooltip. You can specify what animation to use and how long the animation will last. These settings can be applied to both the opening and closing animation.

<img id="clippy" src="http://www.kendoui.com/images/default-source/blog-images/clippyECE846D0DF26.png">

<script type="text/x-kendo-template" id="template">
  <h3>Hey, it's my dog!</h3>
  <img src="http://www.kendoui.com/images/default-source/blog-images/dog.jpg" >
</script>

<script>

  (function ($) {

    $("#clippy").kendoTooltip({ 
      content: kendo.template($("#template").html()),
      position: "right",
      // make the tooltip slide out from clippy
      animation: {
        open: {
          effects: "slideIn:right",
          duration: 200
        },
        // passing reverse: true reverses the slideIn animation
        close: {
          effects: "slideIn:right",
          reverse: true,
          duration: 200
        }
      }
    });

  }(jQuery));

</script>

Interactive Sample

Remember that when you are using animations, refer to the fx documentation. Passing a reverse: true will reverse a desired animation. Not all of the animations are applicable to the tooltip. It currently supports fade, slideIn, expand and zoom.

You can also chain animations for neat effects. I have put together a list with each of these effects in action. The last one is a combo effect for a really neat animation that sort of sweeps in on a curve.

Loading External Content

You can load in external content to the tooltip simply by passing a url property to the content object.

<img id="clippy" src="http://www.kendoui.com/images/default-source/blog-images/clippyECE846D0DF26.png">

<script>

  (function ($) {

    $("#clippy").kendoTooltip({ 
      content: {
        url: "http://en.wikipedia.org/wiki/Office_Assistant"
      },
      width: 500,
      height: 500,
      position: "right",
    });

  }(jQuery));

</script>

Interactive Sample

When you do load external content, you might want to do it dynamically depending on what element you just moused over. In that case, the requestStart function is provided where you can send in some parameters to pass with the AJAX request.

Lots Of Tooltips

Creating a Tooltip for a single item is easy, but what about when you have an entire list of items that you want to display tooltip's for? The Kendo UI Tooltip has a special property called filter that handles just this scenario.

You initialize the tooltip on the container of items, then specify via the filter which items you want to apply the tooltip to.

The template that you use for each item has access to the target object. This object is a jQuery object that represents the item that activated the tooltip. That means that if you want to pass any information to your tooltip, it's easy to do it by adding a data attribute that you can then read off of the target.

That's a little confusing, so as Linus Torvalds says, "Talk is cheap. Show me the code."

A Kendo UI ListView With Tooltips

In this demo, I've hooked into the Google YouTube API (as I've done before), and I'm returning results for a search term. When you mouse over the smallish film icon, you get the counts for likes, comments and views.

I store this information in data- attributes on the img element which is where the tooltip is attached.

<img height="90" width="120" src="#: thumbnail.sqDefault #" alt="thumbnail" data-comments="#: commentCount #" data-likes="#: likeCount #" data-views="#: viewCount #"/>    

When the tooltip is activated, the target object is accessible and is the element that triggered the tooltip wrapped as a jQuery object.

<script type="text/x-kendo-template" id="tooltip-template">
  <div style="text-align: left"
    <p>
      <i class="icon-thumbs-up"></i>: #: target.data("likes") #
    </p>
    <p>
      <i class="icon-comment"></i>: #: target.data("comments") #
    </p>
    <p>
      <i class="icon-eye-open"></i>: #: target.data("views") #
    </p>
  </div>
</script>

An important thing to note here is that the items in the ListView are loaded via ajax. This means that at the time the Tooltip is attached, they DO NOT YET EXIST. This is great because it means that you can add items to a list and if there is a tooltip attached to the container, the items will automatically get the tooltip. That's called delegation and it rocks socks.

Get More Tooltip

If you've had enough of Clippy, but you still can't get enough Tooltip, make sure to grab Kendo UI, then head over to the Tooltip Demos and of course the Tooltip Docs.  This is a widget that I am very excited about as Tooltips are such a quick and easy way to get some extra info to your user without having to occupy precious space in your UI.