Dropdown With Tooltip for Mouse and Touch Devices

[Lee]

I have been asked to add tooltips to a dropdownlist so a user can see more details about an item before selecting it. I found this solution https://docs.telerik.com/kendo-ui/knowledge-base/show-tooltip-for-items but it doesn't work right on touch devices. When you touch the screen, it selects the item, closes the list, and displays the tooltip until you click somewhere else on the screen. I kind of think maybe there should be a separate button for showing the tooltip vs selecting the item. How would I achieve this?

[Martin]

Hello, Lee,

Could you please share where would you like to display the button? If you wish to display it within the component's items, that wouldn't work because the popup will still close when you press the button.

Looking forward to your reply.

Regards,
Martin
Progress Telerik

[Lee]

I'm wanting to place it within the list item to the right. I can work on the exact styling of it later but I'm thinking an icon button that only appears when there are details to show. I think I can work out the "show if" functionality later too. 

[Neli]

Hi Lee,

If it is suitable for you scenario you can add a flag in order to prevent closing of the DropDownList. You can a button in the template of each item. When the button is clicked, you can show the Tooltip.

close: function(e){
          if(!shouldClose){
            e.preventDefault()
          }   
        },
        open: function(){
          $('.details').on('click', function(){

            if(!$('body').data('kendoTooltip')){
              $('body').kendoTooltip({
                filter: 'li.k-list-item',
                position: 'right',
                content: "gggggg",
                width: 220,
                height: 280,
                content: function(e){               
                  var item = ddl.dataItem($(e.target));
                  var result = '<h3>' + item.name + '</h3>' +
                      '<h4>' + item.email + '</h4>' +
                      'Address: <hr />' +
                      '<p>Street: ' + item.address.street + '</p>' +
                      '<p>Suite: ' + item.address.suite + '</p>' +
                      '<p>ZIP Code: ' + item.address.zipcode + '</p>';

                  return result;
                },
              });
            }

            $('body').data('kendoTooltip').show($(this).closest('.k-list-item'))
          })
        },

Here is such Dojo example. - https://dojo.telerik.com/@NeliKondova/uKucacaN

I hope this helps.

Regards,

Neli

[Lee]

For anyone reading this, here is a function I wrote that will cause the name of the hovered item to expand above the dropdown's list when it is too long. It works for dropdownlists or multiselects. 

JavaScript: 

addTooltipsToKendoDropdown(elementId, widgetType);

elementId = the id of the select element
widgetType = "dropdownlist" (default) or "multiselect"

function addTooltipsToKendoDropdown(elementId, widgetType) {
    let tooltipTimeout = null;
    $("body").on("mouseenter", `#${elementId}-list .k-list-item:not(.tooltip-loading)`, function (e) {
        tooltipTimeout = setTimeout(
            function () {
                let element = e.currentTarget;
                let elementWidth = $(element).find(".k-list-item-text")[0].offsetWidth;
                let elementHeight = $(element).offsetHeight;
                let textWidth = $(element).find(".k-list-item-text")[0].scrollWidth;
                if (textWidth <= elementWidth) {
                    return;
                }
                let rect = element.getBoundingClientRect();
                let html = $(element).html();
                let uid = $(element).data("uid");
                let isSelected = false;
                if ($(element).hasClass("k-selected")) {
                    isSelected = true;
                }
                $(element).addClass("tooltip-loading");
                $("body").append(`<div data-id="${uid}" class="ddl-tooltip ${isSelected ? "selected" : ""}" style="position: absolute; top: ${rect.top}px; left: ${rect.left}px; min-width: ${elementWidth}px; min-height: ${elementHeight}; z-index: 10003;">${html}</div>`);
                $(element).removeClass("tooltip-loading");
            }, 300
        );
    });

    $("body").on("mouseleave", `#${elementId}-list .k-list-item:not(.tooltip-loading)`, function (e) {
        let element = e.currentTarget;
        let uid = $(element).data("uid");
        $(`.ddl-tooltip[data-id=${uid}]`).remove();
        clearTimeout(tooltipTimeout);
    });

    $(`#${elementId}-list .k-list-content`).on("scroll", function () {
        throttle(function () {
            clearTimeout(tooltipTimeout);
             $(".ddl-tooltip").remove();
        });
    });

    if ((widgetType === undefined || widgetType.toLowerCase() === "dropdownlist") && $(`#${elementId}`).data("kendoDropDownList")) {
        $(`#${elementId}`).data("kendoDropDownList").bind("close", function () {
            clearTimeout(tooltipTimeout);
            $(".ddl-tooltip").remove();
        });
    } else if (widgetType === "multiselect") {
        $(`#${elementId}`).data("kendoMultiSelect").bind("close", function () {
            clearTimeout(tooltipTimeout);
            $(".ddl-tooltip").remove();
        });

    }
}

SCSS:

Note: You may need other CSS modifications but this will get you going. You will also need to replace the color variables with your own.

.ddl-tooltip {
    background-color: #e9ecef;
    color: $body-text-color;
    font-family: "system-ui", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    padding: calc(.25rem - 1px) 1rem;
    box-shadow: 3px 3px 5px 2px $shadow-color-light;
    pointer-events: none;

    &.selected {
        background-color: $button-primary-color;
        color: $button-primary-text-color;
    }
}

.tooltip-has-focus {
    background-color: #e9ecef;
}