attaching a tooltip to a listview item?

3 posts, 1 answers
  1. ZM
    ZM avatar
    2 posts
    Member since:
    Mar 2013

    Posted 29 Mar 2013 Link to this post

    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}" />
            <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 />             
                    # } #                  
    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?
  2. Answer
    Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 02 Apr 2013 Link to this post

    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:
        filter: ".product-view .showTooltip",
        showOn: "click",
        content: function (e) {
          var container =;
          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.

    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. ZM
    ZM avatar
    2 posts
    Member since:
    Mar 2013

    Posted 03 Apr 2013 Link to this post

    Perfect, thank you!
Back to Top