In the Tooltip topic with cutouts at the arrow , the options for decorating the tooltip using the painted css or svg tools were applied to the Html blocks.
But svg itself has its own tooltip, with a standard form of display and text, which is taken from the tags <title> любой текст </title>
A prerequisite for the appearance of the text of the tooltip is to find the tags <title> inside the tags of the group <g> or inside the nested <svg> <title> </title></svg>

Text appears when you hover and hold the cursor on the block.

See example below:

  <svg width="300" height="120" viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <g> <title> Синий прямоугольник</title> <rect x="10" y="40" width="100" height="40" fill="dodgerblue" /> </g> <g> <title> Зеленый круг</title> <circle cx="150" cy="60" r="20" fill="yellowgreen" /> </g> <g> <title> Оранжевый квадрат </title> <rect x="190" y="40" width="40" height="40" fill="orange" /> </g> </svg>

Question

Is it possible to change the shape or color of the svg tooltip?

  • Most likely not, it depends only on the browser, as well as with alert () in js. - Dantessss

0