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:
<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?">
<!--- Kendo tooltip template--->
<script id="aboutTemplate" type="text/x-kendo-template">
<h3> #=target.data('title')# </h3>
This is a neat way to store additional data into HTML elements, such as a span tag, or any other element as well.
This entry was posted on March 29, 2019 at 2:16 PM and has received 406 views.