为SVG< image>创建工具提示标签 [英] Create Tooltip for SVG <image> tag
问题描述
我正在尝试创建一个工具提示,当用户将鼠标悬停在图标上时,该提示将显示,tootltip将提供有关事件的信息.标签位于SVG图片中.
I am attempting to create a tooltip that will appear when the user hover overs the icon, the tootltip will give information regarding the event. The tag is within an SVG image.
这是图片的代码:
<image class="tooltip-trigger" data-tooltip-text="Battles" id="Battles" x="100" y="200" width="30" height="30" xlink:href="battle.png" />
<g id="tooltip" visibility="hidden" >
<rect x="2" y="2" width="80" height="24" fill="black" opacity="0.4" rx="2" ry="2"/>
<rect width="80" height="24" fill="white" rx="2" ry="2"/>
<text x="3" y="6">Tooltip</text>
</g>
<script type="text/ecmascript"><![CDATA[
(function() {
var svg = document.getElementById('tooltip-svg-5');
var tooltip = svg.getElementById('tooltip');
var tooltipText = tooltip.getElementsByTagName('text')[0].firstChild;
var triggers = svg.getElementsByClassName('tooltip-trigger');
for (var i = 0; i < triggers.length; i++) {
triggers[i].addEventListener('mousemove', showTooltip);
triggers[i].addEventListener('mouseout', hideTooltip);
}
function showTooltip(evt) {
var CTM = svg.getScreenCTM();
var x = (evt.clientX - CTM.e + 6) / CTM.a;
var y = (evt.clientY - CTM.f + 20) / CTM.d;
tooltip.setAttributeNS(null, "transform", "translate(" + x + " " + y + ")");
tooltip.setAttributeNS(null, "visibility", "visible");
tooltipText.data = evt.target.getAttributeNS(null, "data-tooltip-text");
}
function hideTooltip(evt) {
tooltip.setAttributeNS(null, "visibility", "hidden");
}
})()
]]></script>
加载后,工具提示不会出现
When loaded, the tooltip does not appear
推荐答案
您的代码正在运行.您可能遇到的问题是,工具提示大部分出现在svg元素之外.我在svg元素中添加了 overflow:visible;
,现在您可以看到工具提示.
Your code is working. The problem you may have is that the tooltip appears mostly outside the svg element. I've added overflow:visible;
to the svg element and now you can see the tooltip.
(function() {
var svg = document.getElementById('tooltip-svg-5');
var tooltip = svg.getElementById('tooltip');
var tooltipText = tooltip.getElementsByTagName('text')[0].firstChild;
var triggers = svg.getElementsByClassName('tooltip-trigger');
for (var i = 0; i < triggers.length; i++) {
triggers[i].addEventListener('mousemove', showTooltip);
triggers[i].addEventListener('mouseout', hideTooltip);
}
function showTooltip(evt) {
var CTM = svg.getScreenCTM();
var x = (evt.clientX - CTM.e + 6) / CTM.a;
var y = (evt.clientY - CTM.f + 20) / CTM.d;
tooltip.setAttributeNS(null, "transform", "translate(" + x + " " + y + ")");
tooltip.setAttributeNS(null, "visibility", "visible");
tooltipText.data = evt.target.getAttributeNS(null, "data-tooltip-text");
}
function hideTooltip(evt) {
tooltip.setAttributeNS(null, "visibility", "hidden");
}
})()
svg{border:1px solid; overflow:visible;display:block;margin:auto}
<svg id="tooltip-svg-5" viewBox="0 -8 130 238" width="200">
<image class="tooltip-trigger" data-tooltip-text="Battles" id="Battles" x="100" y="200" width="30" height="30" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/pin.png" />
<g id="tooltip" visibility="hidden">
<rect x="2" y="2" width="80" height="24" fill="black" opacity="0.4" rx="2" ry="2"/>
<rect width="80" height="24" fill="white" rx="2" ry="2"/>
<text x="3" y="6">Tooltip</text>
</g>
</svg>
另一种选择是在文本中添加 text-anchor ="end"
并相应地重写rects.
Another option would have been adding text-anchor="end"
to the text and rewriting the rects accordingly.
还有另一种药会在工具提示中使用HTML元素.
Yet another potion would have been using an HTML element for the tooltip.
这篇关于为SVG< image>创建工具提示标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!