如何在SVG中显示文本的工具提示? [英] How to show tooltip for text in SVG?

问题描述

当用户将鼠标悬停在SVG中的文本上时，我需要一个工具提示.另外，文字和工具提示内容也可以使用javascript进行修改.

I need a tooltip when the user hovers over text in SVG. Also, the text and the tooltip content should be modifiable with javascript.

以下内容适用于Firefox，但不适用于Chrome.正确的方法是什么?

The following works in Firefox but not Chrome. What's the correct way to do this?

HTML:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100">
    <rect width="100" height="100" style="fill:black;stroke-width:0"></rect>
    <text id="text1" x="50" y="15" text-anchor="end">text1</text>
    <text id="text2" x="80" y="15" text-anchor="end"
      transform="translate(0,50)">text2</text>
</svg>

Javascript(使用jQuery):

Javascript (with jQuery):

$('#text1').attr('title', 'Tooltip 1');
$('#text2').attr('title', 'Tooltip 2');

我的jsfiddle: http://jsfiddle.net/getvictor/ctaVA/

My jsfiddle: http://jsfiddle.net/getvictor/ctaVA/

推荐答案

标题子元素将用作工具提示.

A title child element will act as a tooltip.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100">
    <rect width="100" height="100" style="fill:black;stroke-width:0"></rect>
    <text id="text1" x="50" y="15" text-anchor="end"><title>Tooltip 1</title>text1</text>
    <text id="text2" x="80" y="15" text-anchor="end"
      transform="translate(0,50)"><title>Tooltip 2</title>text2</text>
</svg>

这篇关于如何在SVG中显示文本的工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！