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

5 posts, 0 answers
  1. Poh Joon
    Poh Joon avatar
    9 posts
    Member since:
    Feb 2012

    Posted 27 Feb 2013 Link to this post

    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"
    });
  2. Rosen
    Admin
    Rosen avatar
    3235 posts

    Posted 27 Feb 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Poh Joon
    Poh Joon avatar
    9 posts
    Member since:
    Feb 2012

    Posted 27 Feb 2013 Link to this post

    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.
  5. Rosen
    Admin
    Rosen avatar
    3235 posts

    Posted 27 Feb 2013 Link to this post

    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!
  6. Julie
    Julie avatar
    1 posts
    Member since:
    Mar 2011

    Posted 09 Apr 2013 Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready