Custom path title for SVG

Question

I'm currently working on a svg and I was wondering if it was possible to easily pop a tooltip while hovering some elements.

I discovered that the attribute title is available while used like this :

<path>
    <title>Custom title</title>
</path>

I then thought about customizing the title element, so that it might spawn quicker, with a different background etc ...

So I tried different things like :

path[title]:hover:after { instructions }

But unfortunately it doesn't seem to work.

Does someone knows an easy way to customize title from path elements ?

Thank you for your help.

Answer 1

Second edit (ARRGGHH!):

The website: http://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip shows how to do styling of tooltips like you wanted.

EDIT:

For SVG tooltips for a path, it is like this:

  <path d="M150 0 L75 200 L225 200 Z">
     <title>This is a traingle</title>
  </path>

Hope this works and it does because I tested it.

===========

If you want a tooltip on an image element do this:

<img title="tooltip text"></img>

It is the same for other things too.

Also, when you put brackets in the css, that is to put:

path[attribute=value]

So you would want:

path title:hover:after { 
  // styling 
} 

I am glad to help. Hope this works!