CODEWITHSUNDEEP
javascriptjquerycsssvg
Goutham
Goutham

Reputation: 13

some pop-up text while hover in svg path

I want some sample text while hover in svg path, can anyone tell me the easiest way please

Here is my css code:

<style>
path:hover{
    fill:yellow;stroke:blue;
}    
.available
{
    fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1
}
</style>

Here is my Html SVG code:

<svg width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047">
    <a href=""><path name="path1" class="available" d="m 97.42857,852.3622 c 0,72.14286 0.71429,72.14286 0.71429,72.14286 l 55,23.57143 -0.71429,-95 z"/></path></a>
    <path name="path2" class="available" d="m 97.42857,809.50506 c 0,42.85714 0,43.57143 0,43.57143 l 55,-0.71429 0,-43.57142 z"/>
    <path name="path3" class="available" d="m 97.21429,766.3622 c 0,42.85714 0,43.57143 0,43.57143 l 55,-0.71429 0,-43.57142 z"/>
</svg>

Upvotes: 1

Views: 3586

Answers (1)

Robert Longson
Robert Longson

Reputation: 124079

The easiest way is to use title elements which UAs turn into tooltips.

<svg width="210mm" height="297mm" viewBox="0 1000 744 500">
    <path fill="red" d="m 97.42857,852.3622 c 0,72.14286 0.71429,72.14286 0.71429,72.14286 l 55,23.57143 -0.71429,-95 z">
      <title>sample text 1</title>
    </path>
    <path fill="blue" d="m 97.42857,809.50506 c 0,42.85714 0,43.57143 0,43.57143 l 55,-0.71429 0,-43.57142 z">
      <title>sample text 2</title>
    </path>
    <path fill="green" d="m 97.21429,766.3622 c 0,42.85714 0,43.57143 0,43.57143 l 55,-0.71429 0,-43.57142 z">
      <title>sample text 3</title>
    </path>
</svg>

Upvotes: 4

Related Questions