HTML image map

[Daniel]

Hi, we're creating an HTML (not an ASP.NET control) image map dynamically from the server side into an ASP Label. An ID is assigned to each AREA tag. There is a TooltipManager on the page and the Tooltip is dynamically created when a user mouses over any hotspot on the map. This process works fine, but the Tooltip appears to the right of the image map in the same place every time. It's like the Tooltip takes the position of the image map and not the hotspot. We've looked over the demos for TooltipManager and Tooltip but both aren't quite the same and don't seem to have an issue. I've attached a screen of what it looks like and the code used for creating the Tooltip. I'm sure it's just a CSS issue but there is nothing special about the page itself, besides it being part of a MasterPage.

ASP

<telerik:RadToolTipManager ID="ttmPrinters" ShowCallout="false" RelativeTo="Element" HideEvent="ManualClose" Position="MiddleLeft" Animation="None" Width="266px" Height="394px" ContentScrolling="None" runat="server" Skin="Silk" RenderInPageRoot="true" IgnoreAltAttribute="true" Modal="true">
</telerik:RadToolTipManager>

JS

var ttm = $find("ctl00_ContentPlaceHolder1_ttmPrinters");
var tooltip = ttm.createToolTip(document.getElementById(id));
tooltip.set_content(request.d);
setTimeout(function () {
    tooltip.show();
}, 10);

[Marin Bratanov]

Hi Daniel,

The first demo you linked (http://demos.telerik.com/aspnet-ajax/tooltip/examples/imagemaptooltipmanager/defaultcs.aspx) is quite similar to your case, even though it has an ASP Image Map. It renders an HTML image map so it does not matter where the hotspots come from, what is important is the following:

• You must add id attributes to the area elements, so the tootlip manager can attach handlers to them. You can see an example in the initializeAreas() function in the scripts.js file: http://demos.telerik.com/aspnet-ajax/tooltip/examples/imagemaptooltipmanager/scripts.js.
• You must add target controls to the TargetControls collection of the tooltip manager according to the IDs and metadata for them that you will create. In the demo both come from the AlternateText property which renders as the title HTML attribute. In your case I think this information should come from the data source. In the demo this is done in the code-behind.

About the provided JS snippet - what is important is that when the show() method is called like that the tooltip will always be relative to its target element and cannot be relative to the mouse. Both demos rely on the tooltip being relative to the mouse because the area elements have some issues otherwise because they are quite special.

Regards,

Marin Bratanov
Telerik

[Daniel]

Hi Marin, I pretty much followed the TooltipManager demo except I rendered the image map as HTML and I did register the AREA ID's with the TooltipManager. Everything works except the positioning on the Tooltip. It seems to be way off in Chrome but in IE, it is slightly off about 53 pixels on the X and 111 pixels on the Y. Because we only use IE, I just adjusted the offsetX and offsetY in JS. This will do for now and we'll just keep at trying to fix it. Thanks.