#contents

*tooltipとは [#ta89914f]
文字にマウスオーバー、あるいはタップするとツールチップを表示することができます。

*使用例 [#b2753108]
 &tooltip(用語){ここにマウスオーバー時の用語の説明};
&tooltip(用語){ここにマウスオーバー時の用語の説明};

 用語に&tooltip(ドレイク){存在するページ名を指定すると、そのページへのリンクが表示される};リンクを表示することもできる。
用語に&tooltip(ドレイク){存在するページ名を指定すると、そのページへのリンクが表示される};リンクを表示することもできる。

*使用時の注意 [#gf0cf73f]
**用語の説明に使えるタグ [#z21ba1e2]

原則これらは用語の説明に使えますが、&color(#ff0000){&size(20){''用語には使わないでください。''};};

 &br;・・・改行
 &color(red){文字};・・・文字色変更
 &size(20){文字};・・・文字サイズ変更
 &ref(img/画像.png,10%);・・・画像の表示。ただし、ツールチップ内に表示することを考慮し、画像の大きさには気をつけてください。
 &ruby(かんじ){漢字};・・・ルビふり
 &heart;・・・ハートマーク
 🐰や😇など・・・絵文字系
 [[ページ名]]・・・内部リンク化
 [[文字>ページ名]]・・・内部リンク化
 [[文字>https://www.yahoo.co.jp/]]・・・外部リンク化
 ''文字''・・・太字化
 %%文字%%・・・取り消し線
 %%%文字%%%・・・下線 (リンクと誤解するから使わないほうがいいです)
**用語の説明に使ってはいけないタグ [#ba5ace62]

用語の説明に使ってはいけないタグは上記以外全てです。
これに加えて、&color(#ff0000){&size(20){''用語には一切のタグ、絵文字を使わないでください。''};};
守っていただけないとツールチップが正常に表示されなくなる可能性があります。


**用語に色をつけたい時は [#t4d80b3d]
用語に色をつけたい時は以下のようにtooltip内にcolorオプションをつけてください。カラーの指定は、カラー名称以外に、#ff0といったカラーコード指定も可です。

''▼用語に色をつけたい時は…''
 色をつけた&tooltip(用語,color=red){ここにマウスオーバー時の用語の説明};です。
色をつけた&tooltip(用語,color=red){ここにマウスオーバー時の用語の説明};です。


また、以下のようにtooltipプラグインをcolorプラグインで括ることはしないでください。
マウスオーバーした時に強制的に改行され、レイアウトが崩れてしまうためです。

''▼こういう書き方はダメ''
 色をつけた&color(red){&tooltip(用語);{ここにマウスオーバー時の用語の説明};};です。
色をつけた&color(red){&tooltip(用語){ここにマウスオーバー時の用語の説明};};です。


**用語を太字化しないでください [#v4305f51]
用語を太字化することを禁止します。以下のように太字化すると、
マウスオーバー時に強制改行され、レイアウト崩れの原因になります。

 色をつけた''&tooltip(用語){ここにマウスオーバー時の用語の説明};''です。
色をつけた''&tooltip(用語){ここにマウスオーバー時の用語の説明};''です。



*用語登録 [#vab315e3]
汎用的に使用する用語登録は、
[[:config/plugin/tooltip]]
で登録してください。

TIME:"2022-08-11 (木) 13:50:51" REFERER:"https://nikke.wikiru.jp/?cmd=edit&page=tooltip%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9&refer=MenuBar"
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS