- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2021-11-25T15:33:54+09:00","default:kanateko","kanateko")
#author("2022-01-30T00:41:18+09:00;2021-11-25T15:33:54+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.5
update=2021-11-24
}}
任意の語句をホバーorタップすることでツールチップを表示するプラグイン。その語句が指定した設定ページで定義済みであるか、もしくは引数で定義を追加することでツールチップを表示できる。一度引数で定義した語句は同じページ内であれば使いまわし可能。
公式の自作プラグインとして同名のものが公開されているが、これはtitle属性を使ってツールチップを表示する形式のため、スマホでの閲覧時には表示されないという欠点がある。そこで今回、新たにスマホにも対応したプラグインを作成することにした。
ツールチップの表示には「[[tippy.js:https://atomiks.github.io/tippyjs/]]」というライブラリを使用している。
:このプラグインでできること|
--任意の語句をホバーorタップでツールチップを表示する
---設定ページでその語句の定義を事前に追加しておくか、もしくは引数で定義を追加する必要がある
--対象の語句がページとして存在する場合はリンクを表示する
--同じ語句でも別々のツールチップを表示することができる
--ツールチップの見た目や表示位置などを変更可能 (拡張予定)
--ツールチップ内でPukiWiki記法を使用可能
*ダウンロード [#e789ebf9]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]
|~日付|~バージョン|~備考|h
|2021-11-24|0.5|#ul([[noteプラグイン>../note]]と併用しやすいようtippy.js関連部分を別ファイルとして分離)|
|2021-08-21|0.4|#ul(デフォルト設定の出力にsetDefaultPropsを使うよう修正,デフォルト設定でのanimationやthemeの設定に対応,引数で設定可能なプロパティにmaxWidthを追加)|
|2021-08-20|0.3|#ul(同じ語句でツールチップの表示内容を切り替える機能を追加)|
|~|0.2|#ul(対象の語句がページとして存在している場合はツールチップにページのリンクを挿入する機能を追加,エラー表示の前後に改行を入れるよう変更,ツールチップの内容を取得する際に改行コードを排除するように修正)|
|2021-08-18|0.1|#ul(初版作成)|
*インストール [#w0c581bc]
+GitHubのtippyフォルダ内にある「tippy.php」および「tooltip.inc.php」 ¬e{:同フォルダ内にあるnote.inc.phpは必要に応じて}; をダウンロードする
+ダウンロードしたファイルをpluginフォルダに入れる。
+(任意) skinフォルダの「pukiwiki.css」の下の方に以下の内容を追加する。
#prism(css){{
/* ツールチップの対象に下線を引く*/
.plugin-tooltip {
border-bottom: 1px dashed gray;
}
/* ツールチップ内のリンクに下線を引く (noteプラグインと共通) */
[data-tippy-root] a {
text-decoration: underline whitesmoke solid 1px;
}
/* ツールチップ内のリンク色を通常の文章と同じにする (noteプラグインと共通) */
[data-tippy-root] a:link, [data-tippy-root] a:visited {
color: unset;
}
}}
*プラグインの設定 [#y0def2d1]
:TOOLTIP_GLOSSARY_PAGE|設定 (用語集) ページ。デフォルトは ":config/plugin/tooltip"
:TOOLTIP_ENABLE_AUTOLINK|語句がページとして存在する場合にリンクを追加するかどうか。デフォルトはtrue
:TOOLTIP_TERM_SEPARATOR|語句と表示内容を切り替えるための識別用文字列のセパレータ。デフォルトは ":"
:TIPPY_ADD_DEFAULT_SETTINGS (tippy.php)|全てのツールチップの表示設定 (プロパティ) を変更する。
#box(label,title=デフォルト設定,color=blue){{
#box(label,title=デフォルト設定){{
animation: shift-toward, (表示位置の方向からのスライドイン/アウト)
allowHTML: true, (HTMLタグの使用を許可する)¬e{:PukiWiki記法を利用可能にするための設定で、実際にHTMLタグを使用することはできない};
interactive: true (ツールチップを選択したりクリックしたりできるようにする)
}}
Tippyのプロパティについては[[All Props | Tippy.js:https://atomiks.github.io/tippyjs/v6/all-props/]]を参照
*使用方法 [#x782d41f]
**インライン [#l6dfc59a]
&tooltip(語句[,オプション]){定義};
語句は必ず第一引数であること。設定ページで既に定義済みの場合は "{定義}" 部分を省略可。同じページ内で既に定義済みの場合も省略可。
***同じ語句で表示内容を変える場合 [#n0b4a886]
&tooltip(語句:識別用文字列){定義};
同じ語句で別々の内容を表示する場合は、語句の後に ":" を付け、その後に任意の文字列を続ける (idのようなイメージ) 。実際のページでは ":" 以降の部分は出力されない。
***オプション [#zd33297c]
:arrow=true/false|ツールチップ吹き出しの矢印部分を表示/非表示
:maxWidth=<数値>|ツールチップの表示幅の最大値
:placement=<位置>|ツールチップの表示位置
#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
:語句3:a|定義3a
:語句3:b|定義3b
︙
上記のようにツールチップで表示したい語句をPukiWikiの定義リスト形式で書き連ねる。定義は1行で書くこと。改行する場合は "&br;" を使う。定義リスト以外は無視される。
*使用例 [#pd23c0fc]
**引数で定義する [#m3c25984]
緑の床の上を歩くと&tooltip(DOT,placement=bottom-start){Damage Over Time: 継続ダメージ};を受ける。ただし&tooltip(DOT);で死ぬことはない。
緑の床の上を歩くと&tooltip(DOT,placement=bottom-start){Damage Over Time: 継続ダメージ};を受ける。ただし&tooltip(DOT);で死ぬことはない。
既にページとして存在している語句にツールチップを追加した場合、ツールチップの最後にページへのリンクが挿入される。
&tooltip(自作プラグイン/card){リンクをブログカード風に表示するプラグイン};
&tooltip(自作プラグイン/card){リンクをブログカード風に表示するプラグイン};
**設定ページで定義する [#tccf641a]
// 設定ページ
:Proc|Procedure:&br;ヒット時などに確率で発動する効果の俗称
// ツールチップを表示するページ
このアイテムの効果は&tooltip(Proc);と相性がいい
このアイテムの効果は&tooltip(Proc);と相性がいい
**同じ語句で別々の内容を表示する [#xd1ac4b4]
&tooltip(きしゃ:記者){記者};が&tooltip(きしゃ:貴社){貴社};に&tooltip(きしゃ:汽車){汽車};で&tooltip(きしゃ:帰社){帰社};する
&tooltip(きしゃ:記者){記者};が&tooltip(きしゃ:貴社){貴社};に&tooltip(きしゃ:汽車){汽車};で&tooltip(きしゃ:帰社){帰社};する
*追加したい機能 [#p5860edc]
-%%語句がページとして存在している場合はリンクにする%% v0.2で少し形を変えて追加
-%%同じ語句で表示するツールチップの内容を変えられるようにする%% v0.3で追加
-引数でデザイン (背景色、文字色、リンク色等) を変更可能にする
*備考 [#pce650c6]
**"allowedHTML" について [#pdd6f6d2]
本来はHTMLタグを使用可能にする設定だが、当然XSSの危険性があるため、あくまでPukiWiki記法を使えるのみに留めている。処理としては定義の取得時に毎回convert_htmlを通しているので、XSS対策はできている・・・ハズ。
**[[noteプラグイン>../note]]との併用について [#s921ec45]
このプラグインの後に開発した[[noteプラグイン>../note]]も表示にtippy.jsを利用しており、その関係でv0.5からプラグインの作りが大きく変わった。[[noteプラグイン>../note]]と併用する場合はv0.5以上を使用するように。
*コメント [#d0888ec3]
#pcomment(,10,above,reply)