銀の弾丸

プログラミングに関して、いろいろ書き残していければと思っております。

SVGでツールチップを表示する

f:id:takamints:20181014113409p:plain

小ネタです。SVGツールチップを表示する方法です。

ホームメイド 製菓用チョコチップ160g
共立食品
売り上げランキング: 114,017

ツールチップってのは、マウスポインタを乗せてしばらくすると、小さなボックスに説明文などが表示されるアレですね。

HTMLの場合

HTMLでは「title属性(Attribute)」です。 title属性に表示したい内容を設定しておけば、マウスポインタを乗せてしばらくすると、ツールチップが表示されます。

以下のHTMLで描いたボックスにマウスを乗せると・・・

HTMLでは「title属性(Attribute)」に設定します。

ソース:

<span style="border-radius:5px; background-color: #080; color:white; font-weight:bold; padding: 1em 2em;"
class="tooltip-container"
title="これはTITLE属性の内容です。">
HTMLでは「title属性(Attribute)」に設定します。
</span>

SVGの場合

しかし、SVGにはtitle属性がありません。 「じゃどうするか?」って調べてみると「SVGでは『title要素』を使いましょう」とのことでした。

以下のインラインSVGで描いた図形にマウスを乗せるとSVGツールチップが表示されます。

これはSVGのタイトル要素。 SVGではTITLE要素に設定しますの・・・

ソース:

<svg viewport="0 0 400 100" width="100%">
  <g>
    <title>これはSVGのタイトル要素。</title>
    <rect x="0" y="0" width="400" height="100" fill="#080" rx="5" ry="5"/>
    <rect x="30" y="20" width="50" height="50" fill="#008" rx="5" ry="5"/>
    <rect x="70" y="45" width="30" height="30" fill="#088" rx="5" ry="5"/>
    <rect x="20" y="50" width="40" height="40" fill="#800" rx="5" ry="5"/>
    <circle cx="340" cy="75" r="20" fill="#880"/>
    <circle cx="310" cy="40" r="40" fill="#808"/>
    <circle cx="350" cy="32" r="30" fill="#088"/>
    <text x="25" y="80" width="400" fill="white" font-weight="bold"
        >SVGではTITLE要素に設定しますの・・・</text>
  </g>
</svg>

JavaScriptではツールチップの内容は、title要素のtextContentに設定します。