WordPressにツールチップを追加する方法（簡単な方法）

WordPressフォームにツールチップを追加しますか？ツールチップは、サイト上の要素にカーソルを合わせたときに表示される小さなボックスで、フォームを混雑させることなく、フィールドに関する追加情報を加えるのに役立ちます。

この記事では、無料のプラグインとWPFormsフォームを使用して、WordPressにツールチップを正確に追加する方法を説明します。数分で完了し、フォームの入力が容易になるちょっとした工夫です。

今すぐWordPressフォームを作成する

WordPressにツールチップを追加する方法

WordPressにツールチップを追加する方法についてのステップバイステップガイドを見てみましょう。

WordPressのツールチップとは？

ツールチップは、訪問者がWordPressウェブサイト上の要素にマウスを重ねたり（モバイルデバイスではタッチしたり）すると表示されるヒント、用語集、またはメッセージです。WordPressフォームでは、ツールチップを使用して、特定のフィールドに関する追加情報を提供できます。

たとえば、下のスクリーンショットをご覧ください。

WPFormsを使用すると、フォームビルダーで各フィールドの説明を簡単に追加できます。通常のフィールド説明とは異なり、ツールチップはデフォルトでは非表示になっています。ユーザーがフィールドの説明にマウスを重ねたときにのみ、特定のフィールドに関する詳細を知りたい場合に表示されます。

フォームに不要な注意散漫を作成することなく、特定のフィールドに関する詳細情報を提供したい場合は、ツールチップを追加するのは良いアイデアです。

ツールチップとは何かを理解したところで、サイトに追加する方法を読み進めてください。

プラグインなしでWordPressツールチップをインストールする方法

はい、プラグインなしでWordPressツールチップをインストールすることは可能です。ただし、ツールチッププラグインを使用してWordPressサイトにツールチップを簡単に追加したくない場合は、上級ユーザーである必要があり、htmlまたはjqueryを使用する必要があります（または開発者に依頼する必要があります）。

幸いなことに、ツールチッププラグインを使用することで、時間とお金を節約できます。WPFormsユーザーには、無料のShortcodes Ultimateプラグインをお勧めします。

Shortcodes Ultimateは使いやすく、最も人気のある最高のWordPressテーマと連携してうまく機能します。

この非常に役立つ無料のWordPressプラグインには、ツールチップショートコードを含むさまざまな機能をサイトに簡単に追加するための50以上のショートコードが含まれています。次に、このWordPressツールチッププラグインを追加する方法を正確に説明します。

ステップ1：WordPressフォームを作成する

まず、サイトにWPFormsをインストールしてアクティブ化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するこのガイドを参照してください。

次に、WordPressで簡単なフォームを作成する必要があります。

フォームの作成はうまくいきました。後で戻ってきます。

ステップ2：Shortcodes Ultimateプラグインをインストールする

次に、ここをクリックしてWordPressにアクセスし、無料のShortcodes Ultimateプラグインをダウンロードしてください。

または、WordPressダッシュボードにすでにいる場合は、プラグイン » 新規追加をクリックし、Shortcodes Ultimateを検索して、今すぐインストールをクリックします。

プラグインがアクティブ化されたら、使用を開始する準備ができました。

ステップ3：ツールチップのショートコードを取得する

次に、WordPressダッシュボードの左側にあるShortcodes Ultimateプラグインを見つけて、利用可能なショートコードをクリックします。そのページを下にスクロールして、ツールチップボタンを選択します。

次のページで、ショートコードをハイライトしてコピーします：

ステップ4：フォームにツールチップを追加する

これでツールチップのショートコードが用意できたので、Simple Contact Form に追加しましょう。

WPForms » すべてのフォームをクリックしてフォームに戻り、ツールチップを追加したいフォームの下にある編集を選択します。

フォームを開いたら、ツールチップを追加したいフィールドをクリックし、ツールチップのショートコードを説明ボックスに貼り付けます。

フォームを保存してフロントエンドで表示すると、ツールチップが表示されます：

ステップ5：ツールチップをカスタマイズする

コードを変更して独自のテキストを表示することもできます。 変更を太字で示した例を次に示します。

[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="This is the content area which will be shown in the Tooltip bubble after the user hovers over it!" behavior="hover" close="no" class=""]This is the text that will be always be displayed and will show the Tooltip content when hovered over![/su_tooltip]

ショートコード » 利用可能なショートコード ページの最下部までスクロールすると、ツールチップ設定でさまざまなオプションを変更することもできます。たとえば次のとおりです。

• スタイル + 色
• 位置
• サイズ
• 動作
• その他多数

次のステップはオプションですが、ツールチップをさらにカスタマイズし、フォームをよりクリーンで邪魔にならないようにします。

ステップ6：ツールチップをアイコンに変換する（オプション）

ツールチップのショートコードで、人々がツールチップをホバーするように具体的に指定して招待しない限り、訪問者はツールチップに表示される追加コンテンツがあることに気づかないかもしれません！読者がツールチップをホバーするようにする素晴らしい方法は、単にテキストを使用するのではなく、アイコンにすることです。

たとえば、多くの人が「i」の情報アイコンを追加し、ユーザーがそのアイコンをホバーするとツールチップが表示されます。どれほどおしゃれでしょう？

これを行うには、まず、無料の Better Font Awesome プラグインをダウンロードして有効化します。この投稿のこの部分に直接ジャンプした場合は、必要に応じてWordPress プラグインのインストール方法へのリンクがあります。

プラグインが有効化されると、簡単なショートコードを使用して WordPress サイトのどこにでも使用できる、何千もの無料アイコンにアクセスできるようになります。それでは、情報アイコンのショートコードをツールチップに追加しましょう。

あるプラグインのショートコードを別のプラグインのショートコードの中に入れようとしています。しかし、心配しないでください。どちらも引き続き機能します！

ツールチップが含まれているフォームのフィールド説明ボックスに戻り、ツールチップのショートコード内の表示されているテキストを次のショートコードに置き換えるだけです。

[icon name="info"]

上記のショートコードで置き換えるテキストエリアは、以下でハイライトされています。

アイコンのショートコードを追加すると、コードは次のようになります。

または、次のショートコードを説明ボックスにコピー＆ペーストして、好みに合わせて調整することもできます。

[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="Tooltip text" behavior="hover" close="no" class=""][icon name="info"][/su_tooltip]

次に、フォームを保存し、フロントエンドで確認してツールチップアイコンを表示します。

よくできました！さらに高度なことをしたい場合や、ツールチップアイコンをラベルの隣のフィールドの上に配置したい場合は、WordPress フォームにアイコンを追加する方法に関する詳細なチュートリアルをご覧ください。

ツールチップは、フォームをすっきりとさせるための最も簡単な方法の1つであり、これはまさに優れたフォームデザインのベストプラクティスが目指すものです。

WordPressでツールチップを追加することに関するよくある質問

ここでは、WordPressにツールチップを追加することに関する最も一般的な質問への回答を紹介します。

WordPressでツールチップを追加するためにプラグインは必要ですか？

技術的には不要ですが、カスタムHTMLまたはjQueryで追加することもできますが、コーディングの知識が必要です。ほとんどの人にとって、Shortcodes Ultimateのような無料プラグインはより速く、はるかに簡単であり、WPFormsのフィールド説明内で直接機能します。

フォームフィールドにツールチップを追加するにはどうすればよいですか？

WPFormsでフォームを作成し、Shortcodes Ultimateでツールチップショートコードを生成し、フィールドの説明ボックスに貼り付けます。フォームを保存して表示すると、ツールチップがホバー時に表示されます。

ツールチップをアイコンに変換できますか？

はい。無料のBetter Font Awesomeプラグインを追加し、アイコンショートコード（情報「i」など）をツールチップショートコード内にドロップします。アイコンにカーソルを合わせるとツールチップが表示され、フォームがすっきりと保たれます。

フォームのツールチップは何に使用されますか？

ツールチップは、フィールドに関する追加のコンテキスト（電話番号が必要な理由や日付の書式設定方法など）を提供しますが、永続的なヘルプテキストでフォームを混雑させることはありません。ユーザーが望む場合にのみ表示されます。

最終的な考え

これで完了です！WordPress でツールチップを追加する方法がわかりました。

フォームのボタンの外観を変更したい場合は、CSSでボタンのスタイルをカスタマイズする方法をお読みください。または、お好みに応じて、CSS HeroでWPFormsをスタイリングする方法（コーディング不要）のガイドをご覧ください。そして、人々が最後まで使い切るフォームを作成するためのその他の方法については、WordPressフォームのベストプラクティスをご覧ください。

今すぐWordPressフォームを作成する

何を待っているのですか？ 今すぐ最高のWordPressフォームプラグインを使い始めましょう。

この記事が気に入ったら、FacebookとTwitterでフォローして、WordPressの無料チュートリアルをさらにご覧ください。