How to add a tooltip to an svg graphic

Question

I have a series of svg rectangles  using D3 js  and I want to display a message on mouseover  the message should be surrounded by a box that acts as background  They should both be perfectly aligned to each other and to the rectangle  on top and centered   What is the best way to do this   I tried adding an svg text using the  x    y    width  and  height  attributes  and then prepending an svg rect  The problem is that the reference point for the text is in the middle  since I want it centered aligned I used text-anchor  middle   but for the rectangle it s the top left coordinate  plus I wanted a bit of margin around the text which makes it kind of a pain   The other option was using an html div  which would be nice  because I can add the text and padding directly but I don t know how to get the absolute coordinates for each rectangle  Is there a way to do this

User · Answer

The only good way I found was to use Javascript to move a tooltip <div> around. Obviously this only works if you have SVG inside an HTML document - not standalone. And it requires Javascript.

_x000D_

function showTooltip(evt, text) {_x000D_
  let tooltip = document.getElementById("tooltip");_x000D_
  tooltip.innerHTML = text;_x000D_
  tooltip.style.display = "block";_x000D_
  tooltip.style.left = evt.pageX + 10 + 'px';_x000D_
  tooltip.style.top = evt.pageY + 10 + 'px';_x000D_
}_x000D_
_x000D_
function hideTooltip() {_x000D_
  var tooltip = document.getElementById("tooltip");_x000D_
  tooltip.style.display = "none";_x000D_
}

_x000D_

#tooltip {_x000D_
  background: cornsilk;_x000D_
  border: 1px solid black;_x000D_
  border-radius: 5px;_x000D_
  padding: 5px;_x000D_
}

_x000D_

<div id="tooltip" display="none" style="position: absolute; display: none;"></div>_x000D_
_x000D_
<svg>_x000D_
  <rect width="100" height="50" style="fill: blue;" onmousemove="showTooltip(evt, 'This is blue');" onmouseout="hideTooltip();" >_x000D_
  </rect>_x000D_
</svg>

_x000D_

User · Answer

You can use the title element as Phrogz indicated  There are also some good tooltips like jQuery s Tipsy http   onehackoranother com projects jquery tipsy   which can be used to replace all title elements   Bob Monteverde s nvd3 or even the Twitter s tooltip from their Bootstrap http   twitter github com bootstrap

User · Answer

On svg  the right way to write the title  lt svg gt     lt title id  quot unique-id quot  gt Checkout lt  title gt   lt  svg gt   check here for more details https   css-tricks com svg-title-vs-html-title-attribute

User · Answer

I always go with the generic css title with my setup  I m just building analytics for my blog admin page  I don t need anything fancy  Here s some code     let comps   g selectAll   myClass       data data      enter       append  rect         styling          transitions          whatever     g selectAll   myClass       append  svg title       text  d  i    gt  d name    -    i     And a screenshot of chrome

User · Answer

Can you use simply the SVG  lt title gt  element and the default browser rendering it conveys   Note  this is not the same as the title attribute you can use on div img spans in html  it needs to be a child element named title    x000D   x000D  rect   x000D    width  100   x000D    height  100   x000D    fill   69c  x000D    stroke   069  x000D    stroke-width  5px  x000D    opacity  0 5 x000D    x000D   lt p gt Mouseover the rect to see the tooltip on supporting browsers  lt  p gt  x000D   x000D   lt svg xmlns  http   www w3 org 2000 svg  gt  x000D     lt rect gt  x000D       lt title gt Hello  World  lt  title gt  x000D     lt  rect gt  x000D   lt  svg gt  x000D   x000D   x000D    Alternatively  if you really want to show HTML in your SVG  you can embed HTML directly    x000D   x000D  rect   x000D    width  100   x000D    height  100   x000D    fill   69c  x000D    stroke   069  x000D    stroke-width  5px  x000D    opacity  0 5 x000D    x000D   x000D  foreignObject   x000D    width  100   x000D    x000D   x000D  svg div   x000D    text-align  center  x000D    line-height  150px  x000D    x000D   lt svg xmlns  http   www w3 org 2000 svg  gt  x000D     lt rect  gt  x000D     lt foreignObject gt  x000D       lt body xmlns  http   www w3 org 1999 xhtml  gt  x000D         lt div gt  x000D          Hello   lt b gt World lt  b gt   x000D         lt  div gt  x000D       lt  body gt        x000D     lt  foreignObject gt  x000D   lt  svg gt  x000D   x000D   x000D       but then you d need JS to turn the display on and off  As shown above  one way to make the label appear at the right spot is to wrap the rect and HTML in the same  lt g gt  that positions them both together   To use JS to find where an SVG element is on screen  you can use getBoundingClientRect    e g  http   phrogz net svg html location in svg in html xhtml

User · Answer

I came up with something using HTML   CSS only  Hope it works for you  x000D   x000D   mzhrttltp     position  relative    display  inline-block     mzhrttltp  hrttltptxt     visibility  hidden    width  120px    background-color   040505    font-size 13px color  fff font-family IranYekanWeb    text-align  center    border-radius  3px    padding  4px 0    position  absolute    z-index  1    top  105     left  50     margin-left  -60px      mzhrttltp  hrttltptxt  after     content        position  absolute    bottom  100     left  50     margin-left  -5px    border-width  5px    border-style  solid    border-color  transparent transparent  040505 transparent      mzhrttltp hover  hrttltptxt     visibility  visible    x000D   lt div class  mzhrttltp  gt  lt svg xmlns  http   www w3 org 2000 svg  width  100  height  100  viewBox  0 0 24 24  fill  none  stroke   e2062c  stroke-width  1 5  stroke-linecap  round  stroke-linejoin  round  class  feather feather-heart  gt  lt path d  M20 84 4 61a5 5 5 5 0 0 0-7 78 0L12 5 67l-1 06-1 06a5 5 5 5 0 0 0-7 78 7 78l1 06 1 06L12 21 23l7 78-7 78 1 06-1 06a5 5 5 5 0 0 0 0-7 78z  gt  lt  path gt  lt  svg gt  lt div class  hrttltptxt  gt       amp zwnj      amp zwnj    lt  div gt  lt  div gt  x000D   x000D   x000D

[javascript] How to add a tooltip to an svg graphic?

Examples related to javascript

Examples related to svg

Examples related to d3.js

Examples related to tooltip