Raindrops1.352で、ツールチップをサポートします。
WordPressの最近の変更で、emoji がサポートされたり、Material Icon, Genericonsといった、画像による表示が、テンプレートやコンテンツ内で多用される傾向が続いています。
このような中で、そのアイコンの機能等を簡単に説明する一つの方法として、シンプルなツールチップをサポートする事にしました。
ツールチップの利用方法
a要素（リンク要素）の場合は、class="tooltip" と title属性の両方が存在する場合にツールチップを表示し、それ以外の要素の場合は、title属性が存在した場合は、ツールチップが表示されます。
この変更により、影響を受ける機能は、ウィジェットカレンダー、検索フォーム、コメントの表示が従来と異なって表示されます。
投稿フォーマットを指定した投稿で、タイトルを記述しなかった時に表示される投稿フォーマットアイコンにも、ツールチップが表示されます。
サンプルコード
以下のソースは、WP Emoji Oneプラグインの出力するソースに、文字サイズを拡大したものをベースに、title属性を追加しています。
|
1 |
<span style="font-size:4em"><img style="margin-left: 3px; margin-right: 3px; vertical-align: middle; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;" title="ツールチップ" src="http://www.tenman.info/wp-37/wp-content/plugins/wp-emoji-one/icons/1F334.png" alt="" /></span> |
|
1 |
<a href="//tenman.info" class="tooltip" title="hello world">hello</a> |
リンクの場合は、class="tooltip"がない場合には、ツールチップを表示しません
hello|
1 |
<a href="//tenman.info" title="hello world">hello</a> |
ツールチップ機能の停止
アドミンバーのカスタマイズをクリックして、カスタマイズページを表示します。
高度な設定を選択して、表示されるTooltip セクションで、「いいえ」を選択し保存します
又は、
functions.php(チャイルドテーマのfunctions.phpが望ましいです）の先頭に、以下の変数を定義します。
|
1 2 3 |
<?php $raindrops_tooltip = false; ?> |
インラインでのツールチップの停止
a要素以外は、title属性がある場合には、ツールチップとして表示しますが、必要のない場合には、class="no-tooltip" を追加していただくとtitle属性が記述されていても、ツールチップは表示されなくなります。
|
1 |
<span style="font-size:4em"><img class="no-tooltip" style="margin-left: 3px; margin-right: 3px; vertical-align: middle; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;" title="ツールチップ" src="http://www.tenman.info/wp-37/wp-content/plugins/wp-emoji-one/icons/1F334.png" alt="" /></span> |