自作プラグイン/tooltip2.inc.php の編集

Wikiを試したい方へ:
「この」Wikiは、PukiWikiのための公式Wikiです。
テスト書き込みなどは お試しサイト https://pukiwiki.osdn.jp/_trial/ をご利用ください

** tooltip2.inc.php [#u408d19a]
|RIGHT:100|LEFT:360|c
|~サマリ|スマホでの閲覧を考慮したツールチップ表示プラグイン|
|~リビジョン|0.4|
|~対応バージョン|1.5.3|
|~投稿者|[[kanateko]]|
|~投稿日|&new{2021-09-19 (日) 14:25:16};|
任意の語句をホバーorタップした際にポップアップでツールチップを表示します。ポップアップ表示には「tippy.js」というライブラリを使用しています。title属性を利用している既存の[[tooltipプラグイン>自作プラグイン/tooltip.inc.php]]だとスマホでの閲覧時に難があるため、別の手段で表示可能なプラグインがあった方が良いと考え、本プラグインを作成しました。

tippy.js公式ドキュメント：http&#115;://atomiks.github.io/tippyjs/

**ダウンロード & インストール [#z18abf12]
必要ファイルのダウンロードとインストール手順については以下のページを参照してください。

http&#115;://jpngamerswiki.com/?b70c1e4037

詳しい使い方や表示例なども掲載しています。

**プラグインの仕様 [#v65fc1e1]
-任意の語句をホバーorタップでツールチップを表示する
--設定ページでその語句の定義を事前に追加しておくか、もしくは引数で定義を追加する必要がある
--ツールチップ内でPukiWiki記法を使用可能
--文章だけでなく画像なども表示できる
-対象の語句がページとして存在する場合はツールチップの最後にリンクを自動的に挿入する
-同じ語句でも別々のツールチップを表示することができる
-ツールチップの見た目や表示位置などを変更可能

**使用方法 [#m766ef90]
 &tooltip(語句[,オプション]){定義};

語句は必ず第一引数で指定してください。設定ページで既に定義済みの場合は "{定義}" 部分を省略できます。同じページ内で既に定義済みの場合も省略できます。

***同じ語句で表示内容を帰る場合 [#ma64de11]
 &tooltip(語句:識別用文字列){定義};

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

***オプション [#v094fe12]
:arrow=true/false|ツールチップ吹き出しの矢印部分を表示/非表示
:maxWidth=<数値>|ツールチップの表示幅の最大値
:placement=<位置>|ツールチップの表示位置
--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

**設定ページの書き方 [#j05f2528]
デフォルトでは「:config/plugin/tooltip」が設定ページとして指定されています。設定ページには整形ルールの定義リストで語句とその定義を書いておきます。

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

定義は1行で書くこと。改行する場合は "&amp;br;" を使います。

**使用例 [#mdabde19]
基本的に既存のtooltipプラグインと使い方は同じです。

***引数で定義を書く場合 [#h9dd827a]
 その通信プロトコルには&tooltip(HTTP){HyperText Transfer Protocol};を使用します。

***同じ語句で別々の内容を表示する [#c1631bab]
同じ語句で表示内容を分ける場合は以下のように識別用の文字列を設定します。

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

***設定ページを使用する場合 [#k0c4903d]
設定ページ
 :HTTP|HyperText Transfer Protocol
表示ページ
 その通信プロトコルには&tooltip(HTTP);を使用します。

**ライセンス [#af428d96]
GPL v3