Tooltips overlap in Kendo listview

[Sriram]

I have a kendo list view in which there are two columns. Each column has a separate tooltip. 

The issue I am having is once I hover from one column to the other the first column tooltip does not disappear. So it displays both the tooltips. How can I fix the issue.  I am using VS 2015 Professional with .Net Framework 4.6.2. The Kendo library I am using is Kendo.Mvc (2017.3.1018.545). The browser is in chrome 68.0.3440.106 and IE 11

Below is the declaration of the same. Also I made sure I used different css class for both the columns.

@(Html.Kendo().Tooltip()

      .For("#Documents")
      .Filter(".descriptionTooltip")
      .ContentHandler("getDescriptionTooltip")
      .Position(TooltipPosition.Right)
      .AutoHide(false).Width(300).Height(100).ShowOn(TooltipShowOnEvent.MouseEnter))
    
    @(Html.Kendo().Tooltip()
      .For("#Documents")
      .Filter(".commentsTooltip")
      .ContentHandler("getCommentsTooltip")
      .Position(TooltipPosition.Right)
      .AutoHide(false).Width(300).Height(100).ShowOn(TooltipShowOnEvent.MouseEnter))

-------------------------------

<script type="text/x-kendo-tmpl" id="SDtemplate">

    <div style="border:none; border-style:none;" >
        <table cellspacing="5" cellpadding="5" border="1" style="padding:5px;border-spacing:5px;border-bottom:1px solid \\#ddd;">
            <tr>
                <td style="width:10px;text-align:center">
                    <strong>&\\#8226;&nbsp;&nbsp;</strong>
                </td>
                <td width="150px">                    
                    &nbsp;&nbsp;#if(Description != null && Description.length <= 20) {# <span>#=Description #</span> #} else if(Description == null) {# &nbsp;  #} else {# <span class='descriptionTooltip'>#=DescriptionShort #</span>  #}#
                </td>
                <td width="150px">
                    &nbsp;&nbsp;#if(Comments != null && Comments.length <= 20) {# <span>#=Comments #</span> #} else if(Comments == null) {# &nbsp;  #} else {# <span class='commentsTooltip'>#=CommentsShort #</span>  #}#
                </td>               
               
            </tr>
        </table> 
    </div>
</script>

-------------------------------------------------

@(Html.Kendo().ListView(Model.Documents)
    .Name("Documents")
    .TagName("div")
    .HtmlAttributes(new { style = "border:none; border-style:none;" })
    .ClientTemplateId("SDtemplate")
    .DataSource(dataSource => dataSource
                        .Batch(false)
                        .ServerOperation(false)
                        .Model(model => model.Id(p => p.DocumentID))
                        .PageSize(5)
                    )
    .Selectable(s => s.Mode(ListViewSelectionMode.Single))
    .Pageable(page =>
    {
        page.PageSizes(false);
        page.PreviousNext(false);
        page.Input(false);
        page.PageSizes(new int[] { 5, 10, 20, 50, 100, 500 });
        page.Enabled(false);
    })
                                    )

------------------------

function getDescriptionTooltip(e) {

        var dataItem = $("#Documents").data("kendoListView").dataItem(e.target.closest("tr"));
        var content = dataItem.Description;
        return content;
    }

    function getCommentsTooltip(e) {
        var dataItem = $("#Documents").data("kendoListView").dataItem(e.target.closest("tr"));
        var content = dataItem.Comments;
        return content;
    }

[Ivan Danchev]

Hello Sriram,

The Tooltip not hiding when hovering the other column is expected given the way both widgets are configured. There are two Tooltips, one is shown for the first column and the other for the second. Since AutoHide is set to false, the Tooltip will hide only when you hover another td element that matches its filter. So Tooltip 1 will hide when you hover another element with class "descriptionTooltip" and Tooltip 2 will hide when you hover another element with class "commentsTooltip".  However if you hover one column and then the other the Tooltip will not hide, because its AutoHide option is set to false. Therefore if you want to hide the Tooltips in this scenario we would suggest setting AutoHide to true.

Regards,
Ivan Danchev
Progress Telerik

[Sriram]

So is there a way I can configure only one tooltip for both the columns and that way it will not overlap?

[Ivan Danchev]

Hello Sriram,

You can use a single Tooltip, for example:

@(Html.Kendo().Tooltip()
    .For("#Documents")
    .Filter("td")
    .ContentHandler("getTooltip")
    .Position(TooltipPosition.Right)
    .AutoHide(false).Width(300).Height(100).ShowOn(TooltipShowOnEvent.MouseEnter))

Note that td element is passed to the Filter option, instead of a specific class.

Specify a ContentHandler:

.ContentHandler("getTooltip")

The content handler that will check the class of the span nested in the td and will return the respective content:

function getTooltip(e) {
  var dataItem = $("#listView").data("kendoListView").dataItem(e.target.closest("tr"));
  var target = $(e.target[0]).find("span");
  var content = "";
  if(target.hasClass("descriptionTooltip")) {
    content = dataItem.Description;
  }
  else if(target.hasClass("commentsTooltip")) {
    content = dataItem.Comments;
  }

  return content;
}

Regards,
Ivan Danchev
Progress Telerik

[Sriram]

Thanks Ivan. I will give this a try and will let you know if I run into any issues.

[Sriram]

Ivan,

This issue has been fixed. However I changed the code little bit as I had two more columns which did not have any class but still an empty tooltip was being shown. So I changed it as below.

========================================================================

function getTooltip(e) {
        var dataItem = $("#Documents").data("kendoListView").dataItem(e.target.closest("tr"));
        var content = "";

        var target = $(e.target[0]);

        if (target.hasClass("descriptionTooltip")) {
            content = dataItem.Description;
        }
        else if (target.hasClass("commentsTooltip")) {
            content = dataItem.Comments;
        }
        return content;
    }

 

@(Html.Kendo().Tooltip()
      .For("#Documents")
      .Filter(".descriptionTooltip, .commentsTooltip")
      .ContentHandler("getTooltip")
      .Position(TooltipPosition.Right)
      .AutoHide(false).Width(300).Height(100).ShowOn(TooltipShowOnEvent.MouseEnter))

========================================================================

[Ivan Danchev]

Hello Sriram,

I am glad the suggested approach resolved the issue. As for the filter configuration, indeed it is correct to set a more specific selector in case some columns must be excluded.

Regards,
Ivan Danchev
Progress Telerik

[Sriram]

Thanks Ivan.