CSS custom tooltip at cursor position

[Lorne]

I have written a CSS custom tooltip that shows a number of tips as the cursor moves over an image based on an area map.  All works fine on a computer but when viewed on a phone/small tablet the image is resized to fit the screen.  I have written some code to resize the area map to fit the resized image but can't find a way to get the tip to show at the cursor position - as a temp measure I have hard coded the tip popup position for each tip. Can anybody help ?

I create the tip with this code:

<div class="tooltip tt1"><area shape="rect" coords="34, 66, 64, 89"><span class="tooltiptext">Tip text goes here</span></div> 

Base info for tooltip and tooltiptext is in my css file and modified by tt1, tt2, tt3 etc to position each tip, the code for which is:

.tooltip.tt1{
  top: -1.5em;
  left: -12em; 
}
.tooltip.tt2{ 
  top: 1.5em;
  left: -12em;
}
.tooltip.tt3{ 
  top: 6.5em;
  left: -9em;
} etc....

Ideally I want to get rid of tt1,tt2,tt3 etc and have top and left dynamically set at the cursor position in the tooltip css code or somehow passed to the tooltip when it shows so the tip is correctly positioned when the image is resized.

[dsonesuk]

Responsive images use percentages, so wouldn't you think that points of reference to specific point on a map would use the same unit, relative to image edges as it is resized.

Em = relative to current font size

% = relative to parent element.

[Lorne]

Thanks for that - it was a partial success.  The left value scales with the image but the top value is fixed at the top of the image regardless of any % value.  Also tried using bottom but the same thing.  Maybe this is because the image is scaling with width 100% and height auto but that is the only way I know to zoom the image and keep the aspect ratio.

[dsonesuk]

Depends if image container grows and shrinks proportionate to image, if its fixed then that's the problem, the positioning must be to outer image container edges. If the image grows in width but not height, is using position: absolute, floated also can affect height proportionally.

[Lorne]

The image scales both height and width inside a table set for max-width equal to the image size so it never grows bigger than its native size but shrinks with the aspect ratio constant.  Here is my actual code right now for the first tooltip only to make it easier to read (note I took the left and top out of CSS to make it easier to see left/top values against the tip):

<table style=" max-width: 844px" cellspacing="1">
  <tr>
    <td>
<map id="FPMap0_ID" name="FPMap0">
<div class="tooltip" style="left: 2%; top: -18px"><area shape="rect" coords="30, 41, 93, 68">
  <span class="tooltiptext">Menu options here let you set a bias for teaching purposes</span></div>
</map>
      <img id="FPImg0_ID" alt="Image not found" border="0" src="Images/MainView.gif" width="100%" height="auto" usemap="#FPMap0">
    </td> 
  </tr>
</table>
 

If I change top to a % value the tip always appears fixed to the top of the image.

[dsonesuk]

I think it would be better not to use map at all, as map coords are fixed points and not responsive unless you get plugin to adjust coords positions.

https://www.w3schools.com/code/tryit.asp?filename=G9GE5OST858I

[Lorne]

Quote

The code you have referenced uses a map with fixed cords and the map does not scale if I shrink the browser window so it does not solve my issue.  I agree that it would be better not to use a map but what other way is there ?  Also I do have code that shrinks the map to fit the image and that works fine - my only issue is that the tooltip vertical position will not scale.

 

[dsonesuk]

Ok! Use container element around image so it will shrink and grow with image and give it position relative; give each tooltip an id with unique tooltip text with position absolute, give them a temporary background colour so you easy positioning them were required and use percentage width and heights to  highlight specific area proportionally. Use left, top, right, bottom properties with percentage units. You should then have near required solution.

This is basically how my example works.

[Lorne]

Many thanks - got it working now.  Initially I did not realise you left the map code in but were not using it, however with a slight tweak to get the tip to show above the area which fires it (using em since the text does not scale and distance depends on number of lines of text in the tip) I have it working off my CSS with this sample code.  I did not set any ID's as it seems to work OK as is:

<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h2>Image Maps</h2>

<table style=" max-width: 640px">
  <tr>
    <td>
      <div class="tooltip" style="left: 22%; top: 15%; right: 70%; bottom: 75%"> <span class="tooltiptext" style="top: -3.8em">Tip 1 long sample text to test word wrap</span></div>
      <div class="tooltip" style="left: 62%; top: 45%; right: 20%; bottom: 40%"> <span class="tooltiptext" style="top: -2.5em">Tip 2 short text</span></div>     
      <img alt="Image not found" border="0" src="Timer2.gif" width="100%" height="auto">
    </td>
  </tr>
</table>
</body>