While coding logic for a Kendo tooltip, I had to send both the anchor's title and other information that the Kendo tooltip would display. I wanted to display the location where the image was taken, and a description of the image like this:

"Grand Prismatic Spring, Yellowstone National Park.

The vibrant colors of this spring is best captured from over-head. Wouldn't it be cool to fly a drone over this and take a few pictures?"

I wanted both elements to be separated with a horizontal rule, and I needed to isolate the location and the description. However, the anchor tag only has a 'title' and an alt tag to store this information.

If you want to store additional information in an element does not support, you can easily use the 'data-' + name prefix like so:

view plain about
1<span title="Grand Prismatic Spring, Yellowstone National Park." data-desc="The vibrant colors of this spring is best captured from over-head. Wouldn't it be cool to fly a drone over this and take a few pictures?">

To get the information that the data element contains, in this case, a Kendo template, use the data- prefix. You can name the prefix anything you want, and within the javascript template, don't need to specify the actual data tag- just leave it blank but name the variable after the 'data-' element (see '#=target.data('desc')#: below).

view plain about
1<!--- Kendo tooltip template--->
2<script id="aboutTemplate" type="text/x-kendo-template">
3    <div class="template-wrapper">
4        <h3> #=target.data('title')# </h3>
5        <p>#=target.data('desc')#</p>
6    </div>
7</script>

This is a neat way to store additional data into HTML elements, such as a span tag, or any other element as well.