Usint TooltipManager with Hotspots

[adrian white]

I've successfully used the tooltipManager with dynamically add items to a repeater nested in a RadPanelbar..

But I'm now trying to achieve the same effect with a region map which is using and ASP:Image along with Asp:RectangleHotSpot for each hotspot. when this is rendered the alternativeText is displayed as a hotspot over the image.. Can I use the RAD Tooltipmanager with this control or is this a scenerio where I need to drop to the RadTooltip control ???

Also will these controls when released form a major or minor release ??

[Tsvetie]

Hello adrian white,
You should not have problems, so I would suggest that you use the manager. The only side-effect that you may get is 2 tooltips - one normal and one Telerik tooltip. That is caused by the fact that HotSpots have both Title and Alt attributes. We will fix this issue for the next update of the Prometheus suite.

As for your other question - I am not sure I understand it - could you please explain in detail what you would like to know about the releases of the Prometheus suite?

Kind regards,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Oleg Fridman]

What is the best way to get a dynamic ToolTip to pop up when someone rolls over a PolygonHotSpot that is part of an ImageMap control? You said that there should be no problem with this, however PolygonHotSpots do not have IDs so I am not sure how to set it as a target of a ToolTipManager.

Thanks!

[Georgi Tunev]

Hi Oleg,

You cannot do this - as you said the ImageMap's PolygonHotSpot, RectangleHotSpot and CircleHotSpot does not have IDs so you cannot refer them. The only solution is to use a RadToolTipManager on the page which will tooltipify all elements including the hotspots.




Kind regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Oleg Fridman]

I think not having this ability is a major loss. I wanted to create a map of the US that contained our client's facilities. When you mouse over them, it would give you more information. I really think this is something you guys should look at b/c I think it is a natural and logical use of the tooltip.

[Georgi Tunev]

Hi Oleg,

I understand your point, however we need to refer to the element in some way - in your scenario you want to use a dynamically created tooltip. Again, if you use a RadToolTipManager which "tooltipifies" every element on the page, your will be able to achieve the desired functionality.

If you are not satisfied with the RadToolTipManager approach, we would suggest implementing your scenario by calling a simple Javascript alert  when the mouse cursor is over the desired area. If you achieve this, send us the working project and we will rework it for you so it shows a RadToolTip instead of the alert box.




Kind regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Oleg Fridman]

I was trying to use the RadToolTipManager. However, this will tooltipify the entire image, regardless of where the hotspots are.

I ended up using an old DHTML menu I had purchased a long time ago to get the desired result.

I cannot send you a demo project b/c the PolygonHotSpot, RectangleHotSpot and CircleHotSpot controls will not compile if you enter "onmouseover=".

What I had suggested was that you essentially create RadImageMap which will have the needed components (ID property, etc) to allow for a tooltip to easily be created on the control. A lot of your competitors have this capability and it is extremely useful when doing something like a map. Mousing over a state, for example, would display the state flag, capital, etc. That is a very simple example, but I needed something along these lines for a client just the other day.

[Georgi Tunev]

Hello Oleg,

I see your point and I logged your request in our database for future consideration. We will be grateful if you can provide us with more details about what you would like to see in such control. Also can you please let us know which products you have tested that have the desired functionality?

In addition, I escalated this thread to our Dev team and we managed to came up with a basic implementation that we hope will fit your requirements - please check the code below:

<form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="scriptmanager"></asp:ScriptManager>
        <asp:ImageMap ID="ImageMap1" runat="server" HotSpotMode="Navigate" ImageUrl="~/MyImage.jpg" >
           <asp:PolygonHotSpot coordinates="128,185,335,157,510,224,510,383,228,383"></asp:PolygonHotSpot>
           <asp:RectangleHotSpot Left="10" Top="10" Bottom="50" Right="50" />
        </asp:ImageMap>

        <telerik:RadToolTip ID="tooltip" runat="server" TargetControlID="area0" IsClientID="true" Text="I am a tooltip over a PolygonHotSpot"></telerik:RadToolTip>
        <telerik:RadToolTip ID="tooltip1" runat="server" TargetControlID="area1" IsClientID="true" Text="I am a tooltip over a RectangleHotSpot"></telerik:RadToolTip>

 <script>
 var map = document.getElementsByName("ImageMapImageMap1")[0];
 var areas = map.getElementsByTagName("AREA");

 for (var i = 0; i < areas.length; i++)
 {
    var area = areas[i];
    area.setAttribute("id", "area" + i);
 }

 </script>

As you can see, we are using a small hack to dynamically assign IDs to elements in the ImageMap's collection which then can be "tooltipified" with RadToolTip. As I noted above, it is a basic implementation only but you can extend it further to fit your scenario.



Kind regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center