Dropdown With Tooltip for Mouse and Touch Devices

1 Answer 15 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?

1 Answer, 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

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