JavaScript click and hover on tooltip.

[Patrick]

I have been trying to figure out a solution I can use across my entire site. Each tooltip has different content and they all have a targetControlId set on them. My problem is, on load, I want to find all tooltips on the page without referencing specific name. Once I have the collection I need to be able to access the targetControlId so I can bind hover AND click events through JavaScript. I have the code for assigning hover and click, I just need the collection and access to the targetControlId attribute.

[Marin Bratanov]

Hello Patrick,

  If you set the ShowEvent of the RadToolTip to a value, different than FromCode it will register the appropriate event itself, so it should not be necessary that you do this by hand, as showing the tooltip OnMouseOver will precede the click in any case, so if the HideEvent is set to ManualClose or FromCode a subsequent click on the target element will not hide the tooltip.

  Nevertheless you can simply declare the IDs of the tooltips with subsequent numbers and use a simple loop to $find() them. You can also output the ClientID values in a hidden field in the Page_Load server-side event, for example, separated with a character (for example "|") and by using the split() JavaScript method get them and again use a loop.

If you have a multitude of controls to tooltipify I would also recommend examining the RadToolTipManager control, as it could decrease the amount of markup and code you will need. It also provides Load-on-demand functionality which will speed up the initial page load.


Regards,
Marin
the Telerik team

[Patrick]

Your first recommendation wont work for me because I have a javascript function that body click handler to the tooltips so they close if someone clicks outside the tooltip.  So unless there is a way to have it close when someone clicks outside the tooltip, I can't use the hover showevent.

The second solution doesn't work either because some pages wont have tooltips, others may have ten, it's all pretty random.  I'm looking for a solution for all pages.

[Marin Bratanov]

Hi Patrick,

I think I may have a suggestion that will allow you to access the controls. You would first get a reference to all the RadControls on the page and if they have the targetControlID property then they are RadToolTips. You can then access it and use it as you like:

function pageLoad()
{
    var theRadControls = $telerik.radControls;
    for (var i = 0; i < theRadControls.length; i++)
    {
        if (theRadControls[i]._targetControlID)
        {
            alert(theRadControls[i].get_targetControlID());
        }
    }
}

The $telerik.radControls array is an object we provide in our static client library. Feel free to further modify this code to match your custom scenario.

I hope my reply was helpful.

Greetings,
Marin
the Telerik team

[Patrick]

That is exactly what I was looking for.  I figured it out yesterday afternoon but nevertheless, it's exactly what I needed.  I hope this helps someone else in the future.