MTAppjQuery P7

MTAppshowHint

対象要素にマウスを乗せると、その上に吹き出しスタイルでヒントを表示する。フィールドラベルの補足説明をホバーで見せる用途。

対象要素にマウスを乗せたとき、その要素の上に吹き出し（バルーン）スタイルでヒントを表示する jQuery プラグインです。フィールドのラベルなどに付けて、入力の補足説明をホバーで見せる用途に使います。吹き出しは対象要素の先頭に prepend され、ホバー中だけ表示されます。

構文

$(selector).MTAppshowHint(options);

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

パラメータ

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

プロパティ	型	既定値	説明
`html`	string	`''`	吹き出しに表示する内容。HTML としてそのまま描画されます（`<br>` 等を使えます）
`text`	string	—	非推奨。`html` が空のときに代わりに使われるエイリアス

戻り値

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

使用例

フィールドラベルにヒントを表示

$('#customfield_title-label').MTAppshowHint({ html: 'タイトルは32文字以内で入力してください' });

改行を含むヒント

$('#customfield_price-label').MTAppshowHint({ html: '税抜価格を入力<br>（自動で税込を計算します）' });

user.js での記述例

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

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $('#customfield_title-label').MTAppshowHint({ html: 'タイトルは32文字以内で入力してください' });
    }
})(jQuery);

生成される HTML

対象要素の先頭に吹き出しが prepend されます。balloon-arrow は幅の異なる10本の線で下向きの三角形（吹き出しの先）を作ります。

<div class="balloon" style="visibility: hidden;">
    <div class="balloon-content">ヒント本文</div>
    <div class="balloon-arrow">
        <div class="line10"></div>
        <!-- … line9 〜 line1 … -->
        <div class="line1"></div>
    </div>
</div>

補足

吹き出しは初期状態で visibility: hidden です。対象要素の mouseenter で表示、mouseleave で非表示になります。
吹き出しは対象要素の上方向に配置されます（要素の高さ＋余白ぶん margin-top をマイナス方向に設定）。対象要素の上に表示スペースがあることを前提とします。
html は HTML としてそのまま描画されるため、信頼できない値（編集者の入力値など）を渡さないでください。装飾付きの固定ヒント文に使うのが想定用途です。
MTAppCustomize の hint オプションや MTAppDebug の ID 表示など、他のメソッドの内部でも利用されています。

構文

パラメータ

戻り値

使用例

フィールドラベルにヒントを表示

改行を含むヒント

user.js での記述例

生成される HTML

補足

関連