bit part Products
MTAppjQuery P7

MTAppTooltip

対象要素にマウスを乗せている間、カーソルに追随するツールチップを表示する。文言は html／title／alt の優先順位で決定。

対象要素にマウスを乗せている間、カーソルに追随するツールチップを表示する jQuery プラグインです。MTAppshowHint（要素の上に固定表示する吹き出し）と違い、ツールチップはマウスの動きに合わせて移動します。表示する文言は html オプション、要素の title 属性、alt 属性の優先順位で決まります。

構文

$(selector).MTAppTooltip(options);

$.fn プラグイン（$(selector).MTAppTooltip(...)）です。対象要素（this）を返すのでチェーンできます。

パラメータ

options {Object} — 省略可。以下のプロパティを持ちます。

プロパティ型既定値説明
htmlstring''ツールチップに表示する内容。空のときは要素の title→alt 属性を使う。HTML としてそのまま描画されます
textstring—非推奨。html が空のときに代わりに使われるエイリアス

戻り値

{jQuery} — 対象要素（チェーン可能）。

使用例

任意のテキストを表示

$('img.help').MTAppTooltip({ html: 'クリックで詳細を表示' });

title 属性をそのままツールチップにする

// html を指定しなければ要素の title 属性が使われる
$('a[title]').MTAppTooltip();

user.js での記述例

user.js（「デザイン → user.js を編集」）に書く場合は、mtappVars.screen_id で画面を判定して呼び出します。

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $('#customfield_note').MTAppTooltip({ text: '公開されません' });
    }
})(jQuery);

補足

  • ツールチップ本体（#mtapp-tooltip）は管理画面にサーバー側（Callbacks.pm）が出力します。フロント側で生成する必要はありません。
  • 対象要素の mouseenter で表示、mousemove でカーソルに追随（カーソルの右上＝left: pageX + 20、top: pageY - 20）、mouseleave でフェードアウトします。
  • html を指定せず title／alt 属性を使う場合、表示中はブラウザ標準のツールチップが重ならないよう、その属性を一時的に空にし、mouseleave で元に戻します。
  • 表示内容は HTML としてそのまま描画されるため、信頼できない値（編集者の入力値など）を渡さないでください。

関連

  • MTAppshowHint — 要素の上に固定表示する吹き出しヒント（カーソル追随しない）。
  • MTAppMsg — 画面上部に通知メッセージを表示する。