Movable Type の管理画面のフィールド名の横にヘルプアイコンを入れてユーザーの手助けを

Movable Type でカスタムフィールドを作るときに「説明」欄にテキストを入れると、そのカスタムフィールドの下に、入力したテキストが表示されます。

でもこれ、ちょっとフィールド名から遠くないですか？

ということで、今回はフィールド名の横にヘルプマークのアイコンを置いて、それにマウスを乗せるとヘルプテキストが表示されるようにしてみたいと思います。

完成すると下図のようになります。

ヘルプアイコンについては、「Movable Type の管理画面で Font Awesome を使おう」で取り入れた Font Awesome を使って表示させます。

なお、ここでは「entdydatacftext」というベースネームの複数行テキストのカスタムフィールドを追加して、そこにヘルプコンテンツを入れたいと思います。ここではカスタムフィールドを例に挙げていますが、もちろん普通のフィールドでも使えます。

user.js

まず、user.js に下記のコードを書きます。

var helpContent = [
 '',
 '',
 '記事の概要を入力します。入力しない場合は本文欄から自動で生成されます。',
 ''
].join("");
// Please edit "#customfield_entdydatacftext-field" as you like
$('#customfield_entdydatacftext-field .field-header').append(helpContent);

このコードの span.field-help-content 内のテキストが表示されるヘルプテキストになります。

また、 #customfield_entdydatacftext-field の部分は、ヘルプアイコンを表示したいフィールドの ID に書き換えてください。ちなみに、この ID は下記のルールになっています。

#フィールドのベースネーム-field

user.css

次に、user.css に下記のコードを書きます。

.fa-question-circle {
 cursor: help;
}
.field-help {
 position: relative;
}
.field-help-content {
 display: none;
 position: absolute;
 bottom: 20px;
 left: 0;
 width: 300px;
 border: 1px solid gray;
 padding: 5px;
 border-radius: 3px;
 background-color: #F3F3F3;
 color: green;
 font-weight: bold;
}
.field-help:hover .field-help-content {
 display: block;
}

細かい微調整の必要はあるかもしれませんが、だいたいこんな感じでOKだと思います。

これで、ヘルプアイコンがフィールドの横に表示され、マウスを乗せるとヘルプテキストが表示されます。

以上です。