attaching a tooltip to a listview item?

[ZM]

How would I attach a tooltip to each listview item?
I want to do something like the following:

<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
        <img src="myimage.jpg" alt="${Name} image" id="${ModelID}" />
        <h2>${Name}</h2>
        <h3>Starting from: $${kendo.toString(parseFloat(Price), "n0")}</h3>
        <div class="edit-buttons">
            <a id="viewbtn" class="k-button k-button-icontext" href="\\#">View </a>
            <a id="tooltipbtn" class="k-button k-button-icontext" href="\\#">TOOLTIP</a>
            <p id="tooltipcontent" style="display:none">
                #for (var i=0; i<VariationsForProduct.length; i++){#
                    ${VariationsForProduct[i].Name} $${VariationsForProduct[i].StartingPrice}
                    <br />
                # } #
            </p>
        </div>
    </div>
</script>

So when the user clicks on the "TOOLTIP" button, they see everything in the paragraph that is hidden below (id="tooltipcontent").

Is there an example of this somewhere? Attaching a tooltip to each item in a listview, with the tooltip content being populated from the listview item?

[Alexander Valchev]

Hi Zarko,

Please check this jsBin example which I prepared for you - it demonstrates a possible implementation of the described scenario. Note the tooltip initialization:

$("#listView").kendoTooltip({
    filter: ".product-view .showTooltip",
    showOn: "click",
    content: function (e) {
      var container = e.target.parent();
      return container.find(".tooltipcontent").html();
    }
});

In addition, using IDs in the template is not recommended as it will render more than once. Please consider working with classes as in the example above.

Regards,
Alexander Valchev
the Telerik team

[ZM]

Perfect, thank you!