3

I have a circle in my SVG and I want something like tooltip, but as simple as possible, best using only CSS if possible.

<circle fill="#FFFFFF" stroke="#000000" stroke-width="3" cx="50" cy="50" r="5"><title>Hello, world!</title></circle>

This code works and the browser shows the title normally, but is it possible to change the title color, position etc.?

Orbit09
  • 205
  • 2
  • 6
  • 13
  • This may help you: http://stackoverflow.com/questions/21703318/is-it-possible-to-enhance-the-default-appearance-of-svg-title-tooltip – ayushgp May 31 '16 at 17:29

1 Answers1

1

Try this:

HTML -

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
   <g id="component">
      <rect id="content" width="50" height="50">
      </rect>
    <g class="tooltip" transform="translate(20,20)" opacity="0.9">
      <rect rx="5" width="100" height="25"></rect>
      <text x="15" y="16">Hello</text>
     </g>
    </g>
</svg>

CSS - 

#component .tooltip {
   visibility: hidden
}

#component:hover .tooltip {
  visibility: visible;
  position: absolute;
 }

#component:hover:after .tooltip{
 position: relative;
 left: 0;
 top: 100%;
 white-space: nowrap;
}

.tooltip text {
 fill: black;
 font-size: 12px;
 font-family: sans-serif; 
}

.tooltip rect {
 fill: yellow;
 stroke: blue;
}

You can read more about it on : https://www.w3.org/TR/SVG/styling.html. You can also experiment on it on : http://plnkr.co/edit/HBlyg15J69XEprC2gyBj?p=preview

Mona
  • 298
  • 3
  • 14