#author("2021-08-20T14:13:32+09:00;2021-08-20T14:12:30+09:00","default:kanateko","kanateko")
#tag(プラグイン,自作,追加)

CENTER:#ref(tooltip.jpg,center,nolink,wrap,400x0)

#contentsx

*ホバーorタップでツールチップを表示するプラグイン [#i0279b82]
#infobox(plugin){{
name=tooltip
pukiwiki=1.5.3
ver=0.1
update=2021-08-18
}}

任意の語句をホバーorタップすることでツールチップを表示するプラグイン。その語句が指定した設定ページで定義済みであるか、もしくは引数で定義を追加することでツールチップを表示できる。一度引数で定義した語句は同じページ内であれば使いまわし可能。

公式の自作プラグインとして同名のものが公開されているが、これはtitle属性を使ってツールチップを表示する形式のため、スマホでの閲覧時には表示されないという欠点がある。そこで今回、新たにスマホにも対応したプラグインを作成することにした。

ツールチップの表示には「[[tippy.js:https://atomiks.github.io/tippyjs/]]」というライブラリを使用している。

:このプラグインでできること|
--任意の語句をホバーorタップでツールチップを表示する
---設定ページでその語句の定義を事前に追加しておくか、もしくは引数で定義を追加する必要がある
--ツールチップの見た目や表示位置などを変更可能 (拡張予定)
--ツールチップ内でPukiWiki記法を使用可能

*ダウンロード [#e789ebf9]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

|~日付|~バージョン|~備考|h
|2021-08-18|0.1|#ul(初版作成)|

*インストール [#w0c581bc]
+ダウンロードした「tooltip.inc.php」をpluginフォルダに入れる。
+(任意) skinフォルダの「pukiwiki.css」に以下の内容を追加する。
#prism(css){{
.plugin-tooltip {
    text-decoration: underline gray dashed 1px;
}
}}

*プラグインの設定 [#y0def2d1]
:TOOLTIP_GLOSSARY_PAGE|設定 (用語集) ページ。デフォルトは ":config/plugin/tooltip"
:TOOLTIP_ADD_DEFAULT_SETTINGS|全てのツールチップの表示設定を変更する。
#box(label,title=デフォルト設定,color=blue){{
placement: auto, (表示位置を自動調整)
allowHTML: true, (HTMLタグの使用を許可する)&note{:PukiWiki記法を利用可能にするための設定で、実際にHTMLタグを使用することはできない};
interactive: true (ツールチップを選択したりクリックしたりできるようにする)
}}
*使用方法 [#x782d41f]
**インライン [#l6dfc59a]
 &tooltip(語句[,オプション]){定義};

語句は必ず第一引数であること。設定ページで既に定義済みの場合は "{定義}" 部分を省略可。同じページ内で既に定義済みの場合も省略可。

***オプション [#zd33297c]
:arrow=true/false|ツールチップ吹き出しの矢印部分を表示/非表示
:placement=xxx|ツールチップの表示位置。
#ac(表示位置一覧){{
--top
--top-start
--top-end
--right
--right-start
--right-end
--bottom
--bottom-start
--bottom-end
--left
--left-start
--left-end
--auto
--auto-start
--auto-end
}}


**設定ページの書き方 [#x818a453]
 :語句1|定義1
 :語句2|定義2
 ︙
上記のようにツールチップで表示したい語句をPukiWikiの定義リスト形式で書き連ねる。定義は1行で書くこと。改行する場合は "&br;" を使う。定義リスト以外は無視される。

*使用例 [#pd23c0fc]
使用例として、このページのインフォボックス部分のソースを表示しておく。

%%%引数で定義する場合%%%
 緑の床の上を歩くと&tooltip(DOT,placement=bottom-start){Damage Over Time: 継続ダメージ};を受ける。ただし&tooltip(DOT);で死ぬことはない。
緑の床の上を歩くと&tooltip(DOT,placement=bottom-start){Damage Over Time: 継続ダメージ};を受ける。ただし&tooltip(DOT);で死ぬことはない。

%%%設定ページで定義する場合%%%
 // 設定ページ
 :Proc|Procedure:&br;ヒット時などに確率で発動する効果の俗称

 // ツールチップを表示するページ
 このアイテムの効果は&tooltip(Proc);と相性がいい
このアイテムの効果は&tooltip(Proc);と相性がいい
 
*追加したい機能 [#p5860edc]
-語句がページとして存在している場合はリンクにする
-同じ語句で表示するツールチップの内容を変えられるようにする
--&tooltip(語句:1);、&tooltip(語句:2);
こんな感じ
-ブロック型のマルチラインで定義を一括追加
--&nop(#tooltip);{{
DOT=Damage Over Time: 継続ダメージ
Proc=Procedure: ヒット時などに確率で発動する効果
}}
こんな感じ
-設定可能なtippyのプロパティを増やす

*備考 [#pce650c6]
**"allowedHTML" について [#pdd6f6d2]
本来はHTMLタグを使用可能にする設定だが、当然XSSの危険性があるため、あくまでPukiWiki記法を使えるのみに留めている。処理としては定義の取得時に毎回convert_htmlを通しているので、XSS対策はできている・・・ハズ。

*コメント [#d0888ec3]
#pcomment(,10,above,reply)