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

f:id:takamints:20181014113409p:plain

WEBページのインラインSVGにツールチップを表示させる方法は、HTMLとは違うので、以下に両方の方法を書いています。

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

ホームメイド製菓用チョコチップ160g

posted with amazlet at 18.09.10

共立食品
売り上げランキング: 114,017

Amazon.co.jpで詳細を見る

HTMLの場合
SVGの場合

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 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>