This is a migrated thread and some comments may be shown as answers.
Tooltips overlap in Kendo listview
7 Answers 25 Views
This is a migrated thread and some comments may be shown as answers.
Sriram
Top achievements
Rank 1
Sriram asked on 06 Sep 2018, 08:16 PM

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;
    }

7 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 10 Sep 2018, 02:29 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Sriram
Top achievements
Rank 1
answered on 11 Sep 2018, 04:09 PM
So is there a way I can configure only one tooltip for both the columns and that way it will not overlap?
0
Accepted
Ivan Danchev
Telerik team
answered on 13 Sep 2018, 11:54 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Sriram
Top achievements
Rank 1
answered on 13 Sep 2018, 03:23 PM
Thanks Ivan. I will give this a try and will let you know if I run into any issues.
0
Sriram
Top achievements
Rank 1
answered on 13 Sep 2018, 06:48 PM

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))

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

0
Ivan Danchev
Telerik team
answered on 17 Sep 2018, 11:43 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Sriram
Top achievements
Rank 1
answered on 20 Sep 2018, 02:41 PM
Thanks Ivan.
Asked by
Sriram
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Sriram
Top achievements
Rank 1
Share this question
or