This is a migrated thread and some comments may be shown as answers.

HTML image map

2 Answers 41 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 08 Sep 2015, 06:23 AM

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);

2 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 08 Sep 2015, 09:47 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Daniel
Top achievements
Rank 1
answered on 09 Sep 2015, 03:47 AM
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.
Tags
ToolTip
Asked by
Daniel
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Daniel
Top achievements
Rank 1
Share this question
or