自作プラグイン/tooltip

2022-11-22 (火) 15:55:06

カテゴリ:プラグイン 自作 追加

tooltip.jpg

ホバーorタップでツールチップを表示するプラグイン

tooltip.inc.php
製作者kanateko
ライセンスGPLv3
バージョン0.6
動作確認PukiWiki 1.5.3 - 1.5.4
最終更新2022-11-22

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

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

ツールチップの表示には「tippy.js」というライブラリを使用している。

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

ダウンロード

最新: GitHub

日付バージョン備考
2022-11-220.6
  • 用語の定義方法にテーブルの書式を追加
2021-11-240.5
  • noteプラグインと併用しやすいようtippy.js関連部分を別ファイルとして分離
2021-08-210.4
  • デフォルト設定の出力にsetDefaultPropsを使うよう修正
  • デフォルト設定でのanimationやthemeの設定に対応
  • 引数で設定可能なプロパティにmaxWidthを追加
2021-08-200.3
  • 同じ語句でツールチップの表示内容を切り替える機能を追加
0.2
  • 対象の語句がページとして存在している場合はツールチップにページのリンクを挿入する機能を追加
  • エラー表示の前後に改行を入れるよう変更
  • ツールチップの内容を取得する際に改行コードを排除するように修正
2021-08-180.1
  • 初版作成

セットアップ

  1. GitHubのtippyフォルダ内にある「tippy.php」および「tooltip.inc.php」 *1 をダウンロードする
  2. ダウンロードしたファイルをpluginフォルダに入れる。
  3. (任意) skinフォルダの「pukiwiki.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;
    }
    

プラグインの設定

TOOLTIP_GLOSSARY_PAGE
設定 (用語集) ページ。デフォルトは ":config/plugin/tooltip"
TOOLTIP_ENABLE_AUTOLINK
語句がページとして存在する場合にリンクを追加するかどうか。デフォルトはtrue
TOOLTIP_TERM_SEPARATOR
語句と表示内容を切り替えるための識別用文字列のセパレータ。デフォルトは ":"
TOOLTIP_ENABLE_TABLE_GLOSSARY
設定ページにおいてテーブルの書式で用語を定義可能にする。デフォルトは"true"
TIPPY_ADD_DEFAULT_SETTINGS (tippy.php)
全てのツールチップの表示設定 (プロパティ) を変更する。

animation: shift-toward, (表示位置の方向からのスライドイン/アウト)
allowHTML: true, (HTMLタグの使用を許可する)*2
interactive: true (ツールチップを選択したりクリックしたりできるようにする)

TippyのプロパティについてはAll Props | Tippy.jsを参照

使用方法

インライン

&tooltip(語句[,オプション]){定義};

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

同じ語句で表示内容を変える場合

&tooltip(語句:識別用文字列){定義};

同じ語句で別々の内容を表示する場合は、語句の後に ":" を付け、その後に任意の文字列を続ける (idのようなイメージ) 。実際のページでは ":" 以降の部分は出力されない。

オプション

arrow=true/false
ツールチップ吹き出しの矢印部分を表示/非表示
maxWidth=<数値>
ツールチップの表示幅の最大値
placement=<位置>
ツールチップの表示位置
表示位置一覧

設定ページの書き方

:語句1|定義1
:語句2|定義2
:語句3:a|定義3a
:語句3:b|定義3b
︙

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

また、v0.6からはテーブル書式も使えるようになり、その場合は以下のように書く。

|語句1|定義1|
|語句2|定義2|
|語句3:a|定義3a|
|語句3:b|定義3b|
︙

使用例

引数で定義する

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

緑の床の上を歩くとDOTを受ける。ただしDOTで死ぬことはない。

既にページとして存在している語句にツールチップを追加した場合、ツールチップの最後にページへのリンクが挿入される。

&tooltip(自作プラグイン/card){リンクをブログカード風に表示するプラグイン};

自作プラグイン/card

設定ページで定義する

// 設定ページ
:Proc|Procedure:&br;ヒット時などに確率で発動する効果の俗称
// ツールチップを表示するページ
このアイテムの効果は&tooltip(Proc);と相性がいい

このアイテムの効果はProcと相性がいい

同じ語句で別々の内容を表示する

&tooltip(きしゃ:記者){記者};が&tooltip(きしゃ:貴社){貴社};に&tooltip(きしゃ:汽車){汽車};で&tooltip(きしゃ:帰社){帰社};する

きしゃきしゃきしゃきしゃする

追加したい機能

  • 語句がページとして存在している場合はリンクにする v0.2で少し形を変えて追加
  • 同じ語句で表示するツールチップの内容を変えられるようにする v0.3で追加
  • 引数でデザイン (背景色、文字色、リンク色等) を変更可能にする
  • そのうち全部書き直したい

備考

"allowedHTML" について

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

noteプラグインとの併用について

このプラグインの後に開発したnoteプラグインも表示にtippy.jsを利用しており、その関係でv0.5からプラグインの作りが大きく変わった。noteプラグインと併用する場合はv0.5以上を使用するように。

コメント

最新の10件を表示しています。 コメントページを参照

  • 素晴らしいプラグインで使わせていただいております。恐縮ながら、質問・要望となりますが、御サイトのツールチップのように、ツールチップ内のリンク色を白にするにはどうしたらいいでしょうか。うちのwikiでtooltipを実装したところ、ツールチップ内のリンク色はpukiwiki.cssの「link color」、「visited color」が適用されるようで、ツールチップの黒背景と同化して若干見づらくなってしまうのです。御サイトを拝見しますと、ページ内のリンク色とツールチップ内のリンク色が分けられているので気になりました。プラグインの機能として、「リンク色の指定」あるいは「ツールチップ内背景色とテキスト色の指定」がありますと嬉しいです! -- 2021-09-26 (日) 16:14:58
    • コメントありがとうございます。ツールチップ内のリンク色変更に関して、「インストール」の項に追記しましたのでそちらをご参照ください。また、現在引数でのデザインの変更は未実装ですが、プラグインの設定であらかじめ全ツールチップのテーマを設定しておくことが可能になっています。tippy.jsで用意されているテーマであれば、プラグインのデフォルト設定の配列に 'theme' => 'テーマ名' を加えれば反映されます (詳細:https://atomiks.github.io/tippyjs/v6/themes/)。引数でのデザイン変更も検討しておきたいと思います。貴重な意見ありがとうございました。 -- kanateko 2021-09-26 (日) 21:11:35
      設定例
      • ご返信ありがとうございます!なるほど、大変参考になりました。 -- 2021-09-26 (日) 22:06:02