How to add a tooltip in HTML when hovering a circle?-CodePudding

I am new to html and javascript and i am trying to create a table with circles that when you hover a circle it will present a tooltip with a date inside (the circles represent events) I used this code in html to create the circles:

<td><svg width='50' height='50'><circle cx='2' cy='2' r='2' fill='#ff8B45' /></svg></td>

can someone tell me how do I add a tooltip to the circles?

CodePudding user response：

You can add a <title>Your text</title> inside the <svg> tag.

<svg width='50' height='50'>
   <circle cx='20' cy='20' r='20' fill='#ff8B45'/>
   <title>11-10-2021</title>
</svg>

CodePudding user response：

You can do this :

<td>
    <svg width='50' height='50'>
        <circle cx='2' cy='2' r='2' fill='#ff8B45'>
            <title>11/10/2021</title>
        </circle>
    </svg>
</td>

CodePudding user response：

You can also refer to the web doc link for tooltip and browser compatibility.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title