web-dev-qa-db-ja.com

SVG「ツールチップ」のようなボックスを作成する方法は？

既存の有効なSVGドキュメントを考えると、「情報ポップアップ」を作成する最良の方法は、特定の要素（たとえば、）の上でホバーまたはクリックすると、任意の量（つまり、1行のツールチップではなく）追加情報？

これは少なくともFirefoxで正しく表示され、画像がビットマップ形式にラスタライズされた場合は表示されません。

popupsvgtooltip
39
morais
<svg>
  <text id="thingyouhoverover" x="50" y="35" font-size="14">Mouse over me!</text>
  <text id="thepopup" x="250" y="100" font-size="30" fill="black" visibility="hidden">Change me
    <set attributeName="visibility" from="hidden" to="visible" begin="thingyouhoverover.mouseover" end="thingyouhoverover.mouseout"/>
  </text>
</svg>

詳細な説明は こちら にあります。

24
Sparr

この質問は2008年に行われました。SVGは4年間で急速に改善されました。現在、ツールチップは、私が知っているすべてのプラットフォームで完全にサポートされています。使う <title>タグ（属性ではありません）を選択すると、ネイティブツールチップが表示されます。

以下にドキュメントを示します。 https://developer.mozilla.org/en-US/docs/SVG/Element/title

48
Neil Fraser

_<set>_要素はFirefox 3では機能しないため、ECMAScriptを使用する必要があると思います。

次のスクリプト要素をSVGに追加する場合：

_  <script type="text/ecmascript"> <![CDATA[

    function init(evt) {
        if ( window.svgDocument == null ) {
        // Define SGV
        svgDocument = evt.target.ownerDocument;
        }
        tooltip = svgDocument.getElementById('tooltip');
    }

    function ShowTooltip(evt) {
        // Put tooltip in the right position, change the text and make it visible
        tooltip.setAttributeNS(null,"x",evt.clientX+10);
        tooltip.setAttributeNS(null,"y",evt.clientY+30);
        tooltip.firstChild.data = evt.target.getAttributeNS(null,"mouseovertext");
        tooltip.setAttributeNS(null,"visibility","visible");
    }

    function HideTooltip(evt) {
        tooltip.setAttributeNS(null,"visibility","hidden");
    }
    ]]></script>
_

Init（）関数を呼び出すには、onload="init(evt)"をSVG要素に追加する必要があります。

次に、SVGの最後に、ツールチップテキストを追加します。

_<text id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
_

最後に、mouseover関数に追加する各要素に以下を追加します。

_onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"
mouseovertext="Whatever text you want to show"
_

http://www.petercollingridge.co.uk/interactive-svg-components/tooltip で機能を改善したより詳細な説明を書きました。

複数の_<tspan>_要素と手動のWordラッピングを必要とする複数行のツールチップはまだ含まれていません。

2
Peter Collingridge

これは動作するはずです：

nodeEnter.append("svg:element")
   .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
   .append("svg:title")
   .text(function(d) {return d.Name+"\n"+d.Age+"\n"+d.Dept;}); // It shows the tool tip box with item [Name,Age,Dept] and upend to the svg dynamicaly
1
Aravind Cheekkallur