AI要約
フォームにツールチップを追加しますか？ツールチップは、WordPressサイトの領域にカーソルを合わせたときに表示される小さなボックスで、情報を詰め込みすぎることなく、フィールドに関する追加情報を追加するのに役立ちます。
この記事では、WordPressでツールチップを追加する方法を紹介します。
この記事の内容
WordPressのツールチップとは？
ツールチップは、訪問者がWordPressウェブサイト上の要素にマウスを重ねたり（モバイルデバイスではタッチしたり）すると表示されるヒント、用語集、またはメッセージです。WordPressフォームでは、ツールチップを使用して、特定のフィールドに関する追加情報を提供できます。
たとえば、下のスクリーンショットをご覧ください。
WPFormsを使用すると、フォームビルダーで各フィールドの説明を簡単に追加できます。通常のフィールド説明とは異なり、ツールチップはデフォルトでは非表示になっています。ユーザーがフィールドの説明にマウスを重ねたときにのみ、特定のフィールドに関する詳細を知りたい場合に表示されます。
フォームに不要な注意散漫を作成することなく、特定のフィールドに関する詳細情報を提供したい場合は、ツールチップを追加するのは良いアイデアです。
ツールチップとは何かを理解したところで、サイトに追加する方法を読み進めてください。
プラグインなしでWordPressツールチップをインストールする方法
はい、プラグインなしでWordPressツールチップをインストールすることは可能です。ただし、ツールチッププラグインを使用してWordPressサイトにツールチップを簡単に追加したくない場合は、上級ユーザーである必要があり、htmlまたはjqueryを使用する必要があります（または開発者に依頼する必要があります）。
幸いなことに、ツールチッププラグインを使用することで、時間とお金を節約できます。WPFormsユーザーには、無料のShortcodes Ultimateプラグインをお勧めします。
Shortcodes Ultimateは使いやすく、最も人気のある最高のWordPressテーマと連携してうまく機能します。
この非常に役立つ無料のWordPressプラグインには、ツールチップショートコードを含むさまざまな機能をサイトに簡単に追加するための50以上のショートコードが含まれています。次に、このWordPressツールチッププラグインを追加する方法を正確に説明します。
WordPressにツールチップを追加する方法
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]
ショートコード » 利用可能なショートコード ページの最下部までスクロールすると、ツールチップ設定でさまざまなオプションを変更することもできます。たとえば次のとおりです。
- スタイル + 色
- 位置
- サイズ
- 動作
- その他多数
次のステップはオプションですが、ツールチップをさらにカスタマイズし、フォームをよりクリーンで邪魔にならないようにします。
ステップ5：ツールチップをアイコンにする（オプション）
ツールチップのショートコードで、人々がツールチップをホバーするように具体的に指定して招待しない限り、訪問者はツールチップに表示される追加コンテンツがあることに気づかないかもしれません！読者がツールチップをホバーするようにする素晴らしい方法は、単にテキストを使用するのではなく、アイコンにすることです。
たとえば、多くの人が「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 フォームにアイコンを追加する方法に関する詳細なチュートリアルをご覧ください。
最終的な考え
これで完了です！WordPress でツールチップを追加する方法がわかりました。
フォームのボタンの外観を変更したい場合は、CSS を使用してボタンのスタイルをカスタマイズする方法をお読みください。または、必要に応じて、CSS Hero を使用して WPForms をスタイル設定する方法（コーディング不要）ガイドをご覧ください。
何を待っているのですか？ 今すぐ最高のWordPressフォームプラグインを使い始めましょう。
この記事が気に入ったら、FacebookとTwitterでフォローして、WordPressの無料チュートリアルをさらにご覧ください。
異なるメッセージを持つ複数のツールチップを追加することは可能ですか？
よろしくお願いします
こんにちは！
はい、フィールドごとに異なるツールチップを作成できます。ただし、1つのフィールドには1つのツールチップしか設定できません。なぜなら、それをホバーすると、1つのツールチップしか表示できないからです。
ご理解いただけたでしょうか。
良い一日を 🙂
Wordpressのアイコンや画像にツールチップを追加するにはどうすればよいですか？
Joshuさん、こんにちは！
このチュートリアルで説明されている手順に従って、ツールチップのショートコードで画像またはアイコンのHTMLタグを囲むだけです。
お役に立てば幸いです。
良い一日を 🙂
こんにちは、ヒントをありがとうございます。
フォーム設定セクションの疑問符アイコンのツールチップのように、各フィールドの下部ではなく、フィールドのラベルの隣にツールチップアイコンを配置すると、フォームがよりすっきりすると思います。もしそのようにされたのであれば、あなたもそれがより良いと同意されると思います。どのようにすれば同様の効果が得られますか？
Chrisさん、こんにちは！
ラベルフィールドにツールチップのショートコードを挿入してみてください。個人的にはテストしていませんが、試してみる価値はあります。
お役に立てば幸いです！
良い一日を 🙂
機能しますが、メールでコードとツールチップの説明がすべて表示され、読みにくくなります。
Garethさん、こんにちは。
この場合、{all_fields}の代わりに通知設定でフィールドのスマートタグを試すことができます。
また、お役に立つかもしれませんが、通知メールでスマートタグを使用する方法に関する素晴らしいチュートリアルがあります。
スマートタグを使用すると、フィールドラベルは自動的に追加されず、値のみが追加されるため、ラベルは手動で追加する必要があります。
お役に立てば幸いです。
良い一日を 🙂
こんにちは、ラベルの後にツールチップアイコンを追加したいのですが、このセクションに[tooltipショートコード]を入れると、プレーンテキストとして認識されるだけです。回避策はありますか？
Sinaさん、こんにちは – 現在、ラベルフィールドはショートコードをサポートしておらず、説明フィールドのみがショートコードをサポートしています。ラベルフィールドに必要であれば、サポートチームがカスタムコードで対応できるかもしれません。有料ライセンスユーザーの場合は、こちらでサポートチケットを作成できます。
では、良い一日を 🙂
こんにちは…
これはWooCommerceの列タイトルに使用できますか？
よろしくお願いします。
Octavio様、こんにちは。WooCommerceとの連携は、主に独自のフォームシステムとの密接な連携のため、サポートしておりません。
WooCommerce内でフォームを使用する必要がある場合は、システムと適切に連携するオプションを見つけられるように、Wooチームに直接お問い合わせいただくことをお勧めします。
ありがとうございます 🙂
こんにちは。
ツールチップをサイトに追加しようとしていますが、機能しません。ショートコードアルティメットには、ドキュメントで検索しない限り、利用可能なショートコードがありません。それが原因でしょうか？
こんにちは。アイコンツールチップの色とサイズを変更できますか？どのようなコードが必要ですか？
エマ様、こんにちは。
良い質問ですね！テキストのフォーマットについては、Shortcode Ultimateのガイドを参照してください。
お役に立てば幸いです！ 🙂
フィールドが入力されていない場合にツールチップを表示するにはどうすればよいですか？すでにそのメッセージが存在することは知っていますが、非常に小さく、多くの人がフォームに入力する際に混乱しています。できれば、何らかの方法で点滅させたいのですが。
Myur様、こんにちは。現在、メッセージをツールチップに表示するオプションはありませんが、ご希望であれば、以下のCSSを使用して検証メッセージのフォントサイズを大きくすることができます。
div.wpforms-container-full .wpforms-form em.wpforms-error { font-size: 16px !important; /* ご希望の値に変更してください */ }参考までに、カスタムCSSを追加する方法については、こちらのドキュメントをご覧ください。
また、このスクリーンショットに示すように、フィールドプレースホルダーに必須メッセージを表示することもできます。