如何向 svg 图形添加工具提示？

我有一系列 svg 矩形(使用 D3.js) ，我想在 mouseover 上显示一条消息，该消息应该由一个充当背景的框包围。它们都应该完美地对齐到对方和矩形(在顶部和中心)。最好的方法是什么？

我尝试使用“ x”、“ y”、“ width”和“ height”属性添加一个 svg 文本，然后添加一个 svg rect。问题是文本的参考点在中间(因为我希望它居中对齐，所以我使用了 text-anchor: middle) ，但是对于矩形，它是左上角的坐标，另外我还想在文本周围留一点空白，这让它看起来有点麻烦。

另一个选项是使用 html div，这很好，因为我可以直接添加文本和填充，但是我不知道如何获得每个矩形的绝对坐标。有办法吗？

172453 次浏览
小开

Can you use simply the SVG <title> element and the default browser rendering it conveys? (Note: this is not the same as the title attribute you can use on div/img/spans in html, it needs to be a child 元素 named title)

rect {
width: 100%;
height: 100%;
fill: #69c;
stroke: #069;
stroke-width: 5px;
opacity: 0.5
}
<p>Mouseover the rect to see the tooltip on supporting browsers.</p>


<svg xmlns="http://www.w3.org/2000/svg">
<rect>
<title>Hello, World!</title>
</rect>
</svg>

或者，如果你真的想在你的 SVG 中显示 HTML，你可以直接嵌入 HTML:

rect {
width: 100%;
height: 100%;
fill: #69c;
stroke: #069;
stroke-width: 5px;
opacity: 0.5
}


foreignObject {
width: 100%;
}


svg div {
text-align: center;
line-height: 150px;
}
<svg xmlns="http://www.w3.org/2000/svg">
<rect/>
<foreignObject>
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
Hello, <b>World</b>!
</div>
</body>
</foreignObject>
</svg>

但是你需要 JS 来打开和关闭显示器。如上所示，使标签出现在正确位置的一种方法是将 rect 和 HTML 包装在同一个 <g>中，将它们放在一起。

To use JS to find where an SVG element is on screen, you can use getBoundingClientRect(), e.g. http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

小开
最佳答案

可以使用 Phrogz 指定的 title 元素。还有一些不错的工具提示，比如 jQuery 的 Tipsy http://onehackoranother.com/projects/jquery/tipsy/(可以用来替换所有 title 元素) ，Bob Monteverde 的 nvd3，甚至是来自 Bootstrap http://twitter.github.com/bootstrap/的 Twitter 工具提示

小开

The only good way I found was to use Javascript to move a tooltip <div> around. Obviously this only works if you have SVG inside an HTML document - not standalone. And it requires Javascript.

function showTooltip(evt, text) {
let tooltip = document.getElementById("tooltip");
tooltip.innerHTML = text;
tooltip.style.display = "block";
tooltip.style.left = evt.pageX + 10 + 'px';
tooltip.style.top = evt.pageY + 10 + 'px';
}


function hideTooltip() {
var tooltip = document.getElementById("tooltip");
tooltip.style.display = "none";
}
#tooltip {
background: cornsilk;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
}
<div id="tooltip" display="none" style="position: absolute; display: none;"></div>


<svg>
<rect width="100" height="50" style="fill: blue;" onmousemove="showTooltip(evt, 'This is blue');" onmouseout="hideTooltip();" >
</rect>
</svg>

小开

在我的设置中，我总是使用通用的 css 标题。我只是在为我的博客管理页面构建分析。我不需要什么花哨的东西。这里有些密码..。

let comps = g.selectAll('.myClass')
.data(data)
.enter()
.append('rect')
...styling...
...transitions...
...whatever...


g.selectAll('.myClass')
.append('svg:title')
.text((d, i) => d.name + '-' + i);

还有一张铬合金的截图。

enter image description here

小开

I came up with something using HTML + CSS only. Hope it works for you

.mzhrttltp {
position: relative;
display: inline-block;
}
.mzhrttltp .hrttltptxt {
visibility: hidden;
width: 120px;
background-color: #040505;
font-size:13px;color:#fff;font-family:IranYekanWeb;
text-align: center;
border-radius: 3px;
padding: 4px 0;
position: absolute;
z-index: 1;
top: 105%;
left: 50%;
margin-left: -60px;
}


.mzhrttltp .hrttltptxt::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #040505 transparent;
}


.mzhrttltp:hover .hrttltptxt {
visibility: visible;
}
<div class="mzhrttltp"><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#e2062c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><div class="hrttltptxt">علاقه&zwnj;مندی&zwnj;ها</div></div>

小开

在 svg 上，标题的正确写法

<svg>
<title id="unique-id">Checkout</title>
</svg>

check here for more details https://css-tricks.com/svg-title-vs-html-title-attribute/

小开

我使用 英雄的项目，我正在工作。(这是 JSX 格式)我将用这段代码处理工具提示问题。

<svg className="h-6 w-6">
<title>{reasons.join(" ")}</title>
<QuestionMarkCircleIcon className={style} />
</svg>

提交答案