Dropdown With Tooltip for Mouse and Touch Devices

2 Answers 122 Views
DropDownList ToolTip
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Lee asked on 06 Feb 2024, 06:49 PM
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?

2 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 09 Feb 2024, 02:39 PM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 09 Feb 2024, 02:50 PM

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
Telerik team
commented on 14 Feb 2024, 09:44 AM

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

0
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
answered on 25 Apr 2024, 02:25 PM | edited on 25 Apr 2024, 02:26 PM

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

Tags
DropDownList ToolTip
Asked by
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Answers by
Martin
Telerik team
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Share this question
or