How to add additional descriptive elements to an element with 'data-'
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 are best captured from overhead. 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 that 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?"> </span>
<!--- 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>
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 4:16 PM and has received 986 views.