How to add additional descriptive elements to an element with 'data-'
Mar 29
by Gregory Alexander Kendo UI, HTML 5, jQuery

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:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org <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?"> 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).
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org <!--- Kendo tooltip template---> <script id="aboutTemplate" type="text/x-kendo-template"> <div class="template-wrapper"> <h3> #=target.data('title')# </h3> <p>#=target.data('desc')#</p> </div> </script> 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.
This entry was posted on March 29, 2019 at 2:16 PM and has received 146 views.
Download Galaxie Blog
Subscribe
Tags
Recent Posts
Recent Comments
Archives
Monthly Archives
CFBloggers Feed
Gregory Alexander Embedding a Video from Vimeo in Galaxie Blog |
Matthew J. Clemente Contributing to CommandBox - Steps for Building and Developing Locally |
Gregory Alexander Galaxie Blog XML Post Directives |
Kinky Solutions Common Mistakes That Engineers Make During The Designer-Developer Hand-Off |
Gregory Alexander How to make a round Kendo UI button |