ToolTip not working when adding content using ClientScript

1 Answer 87 Views
MultiSelect ToolTip
Fred
Top achievements
Rank 2
Iron
Iron
Fred asked on 06 Oct 2022, 08:46 PM

I'm trying to add ToolTip content dynamically with items selected/unselected from the Multiselect control.  The code seems to work with no errors. However, the tooltip doesn't show on mouse over the Multiselect control. 

I also attempted to add an mouseover client attribute event on the Multiselect as well.

Code snippets attached. 

 

Thank you for any help with this issue!

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Doncho
Telerik team
answered on 11 Oct 2022, 11:28 AM

Hi Fred,

The code seems fine. Yet, there is one specific of the RadMultiSelect control that should be considered in this case. The ID set to the MultiSelect control is passed as the ID of the <select> element rendered by the MultiSelect. For the ToolTip to work as expected you will need to retarget it to point to the <div> element wrapping the complete MultiSelect DOM structure.

The wrapper however has no Id so you can use a jQuery approach to get it and pass it to the Tooltip:

var $ = $telerik.$;
$(document).ready(function () {
    var tooltip = $find("<%=Categorytt.ClientID%>");
    var multiSelect = $find("<%=dnCategory.ClientID%>");
    //get the div element wrapping the multi select control
    var multiSelectWrapper = $(multiSelect.get_element()).parents('.RadMultiSelect').get(0);
    //set the wrapper as target of the ToolTip
    tooltip.set_targetControl(multiSelectWrapper);
});

Please give this a try and let me know how it goes.

Kind regards,
Doncho
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Fred
Top achievements
Rank 2
Iron
Iron
commented on 11 Oct 2022, 01:49 PM

Thank You Doncho,

I will give this a try and let you know.

Fred
Top achievements
Rank 2
Iron
Iron
commented on 11 Oct 2022, 03:27 PM

Doncho,

Thanks a bunch. This pointed me in the right direction and it works great. I made a slight modification by placing the code in the Multiselect OnSelect Client Event. 


 function dnCategory_OnSelect(s, e) {
       var tooltip = $find("<%=Categorytt.ClientID%>");
       tooltip.set_content(htmlcontent);
       var multiSelect = s;
       var multiSelectWrapper = $(multiSelect.get_element()).parents('.RadMultiSelect').get(0);
       tooltip.set_targetControl(multiSelectWrapper);
}

Doncho
Telerik team
commented on 14 Oct 2022, 08:14 AM

I am glad I was able to help, Fred.

Thank you for sharing your nice input with the community!

Tags
MultiSelect ToolTip
Asked by
Fred
Top achievements
Rank 2
Iron
Iron
Answers by
Doncho
Telerik team
Share this question
or