How to show advanced tooltips using Elementor

Elementorを使って高度なツールチップを表示する方法をご存知ですか？ありがちな話題かもしれませんが、ツールチップの機能や使い方に関する問い合わせは非常に多いです。やはり、いちいち説明するより、ツールチップの使い方を書いた方がわかりやすいですね。

それでは、Elementor Page Builderプラグインのツールチップについて説明しましょう。

高度なツールチップとは何ですか？

Elementorは最もホットなページビルダーの一つとなっている。Elementorには便利な機能がたくさんあり、その中でも特に面白いのがツールチップです。ツールチップを通して何かの短い説明を加えることができ、画像にすることもできます。

高度なツールチップは、カーソルまたはマウスポインタと組み合わせて使用されるグラフィカル・ユーザー・インターフェース（GUI）要素であり、項目をクリックすることなく、その項目に関する情報を表示します。

高度なツールチップを呼び出す典型的なシナリオは、ソフトウェアアプリケーションのツールアイコンのような他のGUI要素の上にマウスカーソルを置くことであり、ウェブサイトでも広く使用されています。ツールチップは、ヒント、インフォチップ、スクリーンチップとも呼ばれます。

アプリケーションによって、高度なツールチップは、マウスがホバーしているオブジェクトの完全な名前から、追加情報の表示、そのツールやオブジェクトが何をするのかの詳細な説明まで、何でも表示することができます。

例えば、ウィンドウズ・エクスプローラーでは、ファイルの上にマウスカーソルを置くと、そのファイルの詳細（フォーマット・タイプ、サイズ、更新日フィールドなど）が表示され、ローカル・ドライブのパーティションの上にマウスカーソルを置くと、ドライブの空き容量と合計サイズが表示される。

では、高度なツールチップを表示する手順を紹介しよう。そのためには、以下の手順に従ってください：

まず、ウィジェットメニューに行き、ページにウィジェットを挿入します。例えば、「高度なアイコンボックス」を選んでみました。

その後、Advancedタブに行き、「Use Tooltip?」スイッチャーを有効にする。

最後に、スイッチャーを有効にした後、「配置」メニューからツールチップの位置を選択し、効果を確認してください。デフォルトの位置はトップですが、メニューから他の位置を選択することもできます。

よくやった！Elementorを使ってツールチップを表示する設定ができました。

Elementorを使って高度なツールチップを表示する方法についての記事をお楽しみいただけたでしょうか。Elementorは、Webサイト訪問者に追加情報をさりげなく表示するのにとても便利です。

この記事をお読みいただきありがとうございます。良い一日を。