This is a migrated thread and some comments may be shown as answers.

How to avoid tooltip to display when title is null or empty?

5 Answers 5048 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Poh Joon
Top achievements
Rank 1
Poh Joon asked on 27 Feb 2013, 07:43 AM
When we hover on element that has title it will show correctly but when we hover on element that do not have title, it will still display the previous element title. So how to avoid tooltip to display when title attribute is unavailable or empty? Thank you.

$("#Grid").kendoTooltip({
         filter: "td"
});

5 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 27 Feb 2013, 11:27 AM
Hello Poh,

I'm not sure about your exact scenario from the given description. Is the second element, which does not have a title, within the other element which does have title? If this is the case, I'm afraid that the tooltip will always be shown as it is the container which is hovered. The same behavior can be observed with the built-in browser tooltip.

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Poh Joon
Top achievements
Rank 1
answered on 27 Feb 2013, 12:12 PM
Hi,

I want to show tooltip in all gridcells in grid. But some cells I do not want to show tooltip so the TD element will have no title attribute.

My workaround is as below :

var tooltip = $("#Grid").kendoTooltip({
                filter: 'th[title],td[title]',
                position: "top"
            }).data("kendoTooltip");
           
Can Kendo Tooltip has an option to ignore whatever element in the filter selectors which the "title" attribute is null or "title" attribute is not null but empty?

I have tried to run the above mentioned code and it is working fine, however when mouse out, the tooltip still stay on grid, don't it should auto hide?

So i write following workaround:

$("th[title],td[title]").on("mouseleave", function () {
                tooltip.hide();
            });

Currently I am using Bootstrap tooltip and it is working fine on element which the title attribute is not exist or title is empty, it just ignore and won't show it.

Another question is how to change the tooltip background color? It seem like default gray color in boostrap theme will look not obvious in grid, because both grid and tooltip are gray in color.

Thanks.
1
Rosen
Telerik team
answered on 27 Feb 2013, 02:46 PM
Hello Poh,

In order to achieve this it should be sufficient to set filter: "[title]". This will select all the elements which have title attributes. As you may know the filter option is intended to be used as a whitelist - elements for which the tooltip should be shown. Thus you should make sure that the selector matches does element and exclude not appropriate ones.

The background can be changed via CSS. For example:

div.k-tooltip.k-popup,
.k-tooltip-content {
  background: #000000;
  color: #ffffff;
  border: #000000;
}

Greetings,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Julie
Top achievements
Rank 2
answered on 09 Apr 2013, 01:48 PM
This is exactly what I was looking for.

We have a dynamically generated table with labels for descriptions, some of which have tooltips and some don't. The values that show are also shown in spans and should not have tooltips at all. I wanted all tooltips to show with the kendo styling but only when a title is actually set. I was getting the last tooltip shown on the description labels that shouldn't have anything and on the value labels. I was attempting to check for the value of the content in the shown event to hide the tooltip if the text was empty but this didn't work either.

Setting the filter to  "[title]" did the trick perfectly. Now all tooltips on my page show with the kendo styling and it does not adversely affect the rest of the page. it is a bit of a pain to have to assign tooltips to a container (in this case i have one assigned to the table and another assigned to a different table). In Telerik Ajax you just had to put a tooltip manager on the page and all tooltips would show in the same way but this will work now I've got the filter right.

Hopefully this explains why people want the abilty to assign tooltips to a container that contains items that may or may not need to show a tooltip. It would be nice if more in-depth information on the possible values of the filter could be added to the documentation, to enable people to more easily find this solution and not have to spend a full day on this (like me!)

Thanks

Julie
0
Chris
Top achievements
Rank 1
Iron
answered on 08 Oct 2021, 05:07 PM | edited on 08 Oct 2021, 05:12 PM

If you want to avoid displaying a Kendo ToolTip for filtered elements that have a title attribute defined but the title is empty, you can use the show event handler.  Consider the following Kendo UI MVC code:

@(Html.Kendo().Tooltip()
    .For("#myForm")
    .Filter("li.k-item[title], span.k-dropdown[title], span[title], input[title], a[title], textarea[title], th[title], label[title]")
    .Position(TooltipPosition.Right)
    .AutoHide(true)
    .Events(events => events.Show("onShowToolTip").Hide("onHideToolTip"))
    )

Where I want to show tool tips for a lot of different elements if they have titles.  Now, sometimes Kendo (or HTML helpers) inject empty title attributes which can mess up how the ToolTip displays (think Kendo DropDownList).  To handle this situation, you can check the tool tip element content, as follows:

    var onShowToolTip = function (e) {
        try {
            var toolTipEle = this;

            //sanity check that the toolTip element content exists
            if (toolTipEle.content === null || toolTipEle.content === undefined) {
                console.log("the toolTip element content does not exist ... exiting function.");
                return;
            }

            //if toolTopEle content is empty, hide the tooltip and return
            var toolTipContent = toolTipEle.content.text();
            if (toolTipContent === null || toolTipContent === undefined || toolTipContent.length <= 0) {
                console.log("---- tool tip has no content ... hiding the tooltip and exiting function.");
                toolTipEle.content.parent().css("visibility", "hidden");
                return;
            }
            toolTipEle.content.parent().css("visibility", "visible");

        } catch (ex) {
            console.log("error: " + ex.message);
        }
    };
and another function to handle the onHide event
        var onHideToolTip = function (e) {
            try {
                var toolTipEle = this;
                toolTipEle.content.parent().css("visibility", "hidden");
            } catch (ex) {
                console.log("error: " + ex.message);
            }
        };

Ivan Danchev
Telerik team
commented on 12 Oct 2021, 12:55 PM

Chris,

This is an interesting approach. Thank you for sharing it with the community.

Tags
ToolTip
Asked by
Poh Joon
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Poh Joon
Top achievements
Rank 1
Julie
Top achievements
Rank 2
Chris
Top achievements
Rank 1
Iron
Share this question
or