Liferay DXP 7でツールチップとヘルプアイコンを実装する

こんにちは。おおたにです。

今回はツールチップとヘルプアイコンの実装方法について紹介します。
ツールチップと言えば、以下のようなやつですね。ちょっとした説明をポップアップ表示させられるのでなかなか便利です。

Liferayでは、ヘルプアイコンとセットになったツールチップ（上の画像のやつ）の部品が用意されているほか、任意のHTML要素へのツールチップ追加も簡単にできます。それぞれについて見ていきましょう。

ヘルプアイコン

ヘルプアイコンの表示にはliferay-ui:icon-helpというタグを使います。例えばこんな感じに書くだけで、

<p>help icon 2<liferay-ui:icon-help message="msg.tooltip.help-icon"/></p>

以下のようなヘルプアイコン&ツールチップが実装できます。messageに言語キーを指定すると多言語化もできます。超簡単！

Liferay Development Tutorialsに詳しい説明が載っていますのでご参照ください。

任意のHTML要素へのツールチップ追加

HTML要素のclass属性にlfr-portal-tooltipを追加し、data-title属性にツールチップの文言を指定するだけで、任意のHTML要素にツールチップを追加できます。例えば、

<p class="lfr-portal-tooltip" data-title="tooltip for html element">html element 1</p>

と書くだけで、以下のようなツールチップが表示されるようになります。こちらも簡単！

こちらを多言語化する場合は、JSP式(JSP expression)等を使ってdata-title属性に多言語化された文字列を指定する必要があります。

data-title="<%=LanguageUtil.get(request, "msg.tooltip.html-element") %>"

今回は以上になります。是非みなさんもツールチップを使ってみてください！