WIKIWIKIユーザー助け合い掲示板

tooltipを使用したテキストで文字色を変えたい

8 コメント
views
4 フォロー

tooltipプラグインで説明を付けた部分のテキストの色替えをしたいのですが、何かいい方法はないでしょうか?

名前なし
作成: 2021/07/12 (月) 09:12:40
最終更新: 2021/07/12 (月) 09:14:43
通報 ...
1
01v 2021/07/13 (火) 00:25:27

以下の書き方でできます。

&color(red){&tooltip(マウスオーバーすると){説明がポップアップする};};
&tooltip(マウスオーバーすると){&color(red){説明};がポップアップする};

説明リンク

2
名前なし 2021/07/13 (火) 01:38:52 988c1@da3c9 >> 1

ありがとうございます。色替え自体は出来たのですが、tooltipで装飾した部分の後ろに普通のテキストを続けて書くと、マウスオーバーした際に前者が上に、後者が下になって表示されてしまいます。色替えをしない時と同様の挙動をしてほしいのですが無理でしょうか……

3
01v 2021/07/13 (火) 06:53:58 >> 1

言われているような現象を確認できません。どのような書き方ですか。
文章の内容は適当でよいのでコピペで二つの違いを確認できるように書いてください。

4
名前なし 2021/07/13 (火) 12:30:24 988c1@da3c9

&color(red){&tooltip(ABC){あいうえお};};段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1
こちらが色替えした場合、

&tooltip(ABC){あいうえお};段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1
こちらが色替えしない場合になります。

5
01v 2021/07/13 (火) 20:00:19 修正 >> 4

現象を確認しました。
PC環境では問題は見られませんが、この書き方でスマホでツールチップを表示(タッチ)するとツールチップより後の段落1~が改行されます。
回避策は以下の書き方が挙げられますが、あまり実用的ではないです。
wikiwikiさんに現象を連絡しますが、修正されるかはわかりません。

#color(red){{
&tooltip(ABC){あいうえお};&color(black){段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1};
}}

上でやってることは

  • #color(red){{}}で囲った範囲の基本色を赤にする。
  • tooltip以外を部分的に&color(black){};で黒(あるいは標準色)に戻す。

問題の現象

  • &tooltip(){};をインライン型プラグインで囲む。
    例えば&size(){};とかでも。
  • ツールチップをスマホの画面タッチで表示させる。
    PCのマウスオーバーは問題なし。スマホのタッチで発生。
  • 囲んだ方の};の位置で改行が発生する。
    color(red){&tooltip(ABC){あいうえお};段落1};段落2、と書けば段落2の手前で改行される。
  • ツールチップ表示の問題
    &tooltip以外にも、Glossaryや((脚注))でも同様。
6
名前なし 2021/07/13 (火) 21:00:46 988c1@da3c9 >> 5

ありがとうございます、回答頂いた書き方を試したところ段落1以降が改行されずに表示されました。
01vさんの環境ですとPCでは従来の書き方でも問題なく表示されるとのことですが、自分の環境ではPCから閲覧した場合でもマウスオーバーすると段落1以降が改行されてしまいますね……

7
01v 2021/07/13 (火) 23:41:25 >> 4

お使いのブラウザは何でしょうか。私はFirefoxで見てますが問題の現象がおきません。

8
名前なし 2021/07/14 (水) 00:06:03 988c1@da3c9 >> 7

GoogleChromeです。あと今試してみましたが、MicrosoftEdgeでも同様の現象が起きますね。