tooltip2.inc.php

サマリスマホでの閲覧を考慮したツールチップ表示プラグイン
リビジョン0.4
対応バージョン1.5.3
投稿者kanateko
投稿日2021-09-19 (日) 14:25:16

任意の語句をホバーorタップした際にポップアップでツールチップを表示します。ポップアップ表示には「tippy.js」というライブラリを使用しています。title属性を利用している既存のtooltipプラグインだとスマホでの閲覧時に難があるため、別の手段で表示可能なプラグインがあった方が良いと考え、本プラグインを作成しました。

tippy.js公式ドキュメント:https://atomiks.github.io/tippyjs/

ダウンロード & インストール

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

https://jpngamerswiki.com/?b70c1e4037

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

プラグインの仕様

使用方法

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

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

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

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

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

オプション

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

設定ページの書き方

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

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

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

使用例

基本的に既存のtooltipプラグインと使い方は同じです。

引数で定義を書く場合

その通信プロトコルには&tooltip(HTTP){HyperText Transfer Protocol};を使用します。

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

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

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

設定ページを使用する場合

設定ページ

:HTTP|HyperText Transfer Protocol

表示ページ

その通信プロトコルには&tooltip(HTTP);を使用します。

ライセンス

GPL v3


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2021-09-19 (日) 14:27:59
Site admin: PukiWiki Development Team

PukiWiki 1.5.3+ © 2001-2020 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.488 sec.

OSDN