用途
新着
履歴
分類

jQuery ツールチップ

jQuery ツールチップ
ツールチップとは、ちょっとした説明を追加したいときに使う吹き出しのような表現です。

何か説明を付け加えたい時のこの表現 → ?

こんな感じで説明が表示されます。

マウスのカーソルを合わせると付加情報が表示されます。 上のサンプルではCSSのみで吹き出しを作っています。

表現をもっと吹き出しっぽくするために、SVGを使って吹き出しを描いてみます。

多角形

SVGの多角形を使った吹き出し
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="50" class="fl pd10">
<polygon points="10 0, 200 0, 200 50, 10 50, 10 10, 0 10" stroke="#998877" fill="#FFEEDD"></polygon>
<foreignobject x="20" y="5" width="170" height="40">
<div class="demo_txt">SVGの多角形を使った吹き出し</div>
</foreignobject>
</svg>

ベジェ曲線

SVGのベジェ曲線を使った吹き出し
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="50" class="fl clear pd10">
<path d="M10,10 Q10,0 20,0 L190,0 Q200,0 200,10 L200,40 Q200,50 190,50 L20 50 Q10,50 10,40 L10,20 L0,15 L10,10" stroke="#998877" fill="#FFEEDD"></path>
<foreignobject x="20" y="5" width="170" height="40">
<div class="demo_txt">SVGのベジェ曲線を使った吹き出し</div>
</foreignobject>
</svg>

こやつらを?の中に隠してあげると…

SVGの多角形の吹き出しの場合 →  ?

SVGの多角形を使った吹き出し


SVGのベジェ曲線の吹き出しの場合 →  ?

SVGのベジェ曲線を使った吹き出し
公開 2019-08-06 23:47:09
このページの二次元コード
jQuery ツールチップ

人気のサンプル

search -  category -  about
© 2024 kipure
Top