Diviを使用してページの任意の場所にホバーツールチップを配置する方法

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。

今週は、進行中のDiviデザインイニシアチブの一環として、Diviを使用してページの任意の場所にホバーツールチップを作成して配置する方法を紹介します。 これは、すぐにページに直接含めることなく、訪問者とサイド情報を共有するための優れた方法です。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

ホバーツールチップレイアウトを無料でダウンロード

無料のホバーツールチップレイアウトに手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

DogWalkerホームページレイアウトを使用して新しいページを作成する

新しいページを追加

最初に行う必要があるのは、 [ページ]> [新規追加]に移動して新しいページを作成することです。 ページにタイトルを付け、ページを公開し、VisualBuilderに切り替えて続行します。

Dog WalkerLandingページをアップロードする

次に、ランディングページのレイアウトをページにアップロードします。 このレイアウトパックを使用してホバーツールチップの手法を実行しますが、このアプローチを作業中のあらゆる種類のレイアウトに適用できます。

ホバーツールチップデザインを作成する

セクションの下部に新しい行を追加

列の構造（必要なツールチップの数を決定します）

ランディングページのレイアウトをアップロードしたら、ホバーツールチップの作成を開始します。 それらをページの特定の場所に追加しますが、変換変換オプションを使用してどこにでも配置できます。 ページで次のセクションを見つけて、その下部に3列の行を追加します。

行の最大幅

ツールチップのデザインが正しい場所に表示されるようにするために、その上にある行に使用されたのと同じ行の最大幅を使用します。 行のサイズ設定に移動し、それに応じて最大幅を調整します。

• 最大幅：1280px

間隔

行コンテナが占めるスペースを減らすために、間隔設定のデフォルトの上下のパディングを削除します。

• トップパディング：0px
• ボトムパディング：0px

オーバーフロー

また、行のオーバーフローが[詳細設定]タブに表示されるようにしています。

• 水平方向のオーバーフロー：目に見える
• 垂直オーバーフロー：可視

ツールチップテキストモジュールを列1に追加

コンテンツボックスにコンテンツを追加する

クエスチョンマークスパン

最初のツールチップデザインの作成を開始する時が来ました！ テキストモジュールを使用します。 コンテンツボックス内にスパン（ツールチップアイコン用）とdiv（ツールチップコンテンツ用）を追加します。 これにより、ホバーツールチップアイコンとツールチップコンテンツを個別にスタイル設定する自由度が高まります。 スパンを追加し、それにクラス「疑問符」を割り当てることから始めます。

ツールチップDiv

'tooltip-content'クラスを使用してコンテンツボックスにdivを追加して続行します。 このdivに選択したツールチップコンテンツを追加します。

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Open Sans
• テキストの色：#ffffff

H3テキスト設定

H3テキスト設定も変更します。

• 見出し3フォント：Amatic SC
• 見出し3のテキストの色：#ffffff
• 見出し3テキストサイズ：30px

サイジング

また、モジュールの幅と高さを調整して、ホバー効果を作成しています。

• 幅：300px
• 高さ：42px

間隔

トップパディングも追加します。

• トップパディング：10px

デフォルトの可視性

これで、デフォルトの状態で、ツールチップアイコンの下にあるすべてのものを非表示にする必要があります。 そのため、[詳細設定]タブでオーバーフローを非表示にします。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

ホバーの可視性

ただし、ホバーすると、すべてが表示されます。 これを行うには、ホバー時にオーバーフローを表示します。

• 水平方向のオーバーフロー：目に見える
• 垂直オーバーフロー：目に見える

テキストモジュールの下にコードモジュールを追加

モジュールのスタイルを設定したので、割り当てたCSSクラスを使用して、コンテンツボックス内のspanとdivのスタイルを設定する必要があります。 ツールチップのテキストモジュールのすぐ下にコードモジュールを追加します。

テキストモジュールのスタイルDivにCSSコードを追加する

次のCSSコード行を追加して、テキストモジュールのさまざまな部分のスタイルを設定します。

<style>
.question-mark {
background-color: #000;
padding: 10px 16px 10px 16px;
border-radius: 500px;
}

.tooltip-content {
background-color: #ee6a5b;
padding: 20px;
border-radius: 5px;
}</style>

ツールチップテキストモジュールのクローンを2回作成し、残りの列に配置します

最初の列が完成したら、ツールチップテキストモジュールのクローンを2回作成し、行の残りの2つの列に複製を配置できます。

ツールチップの内容を変更する

各複製のツールチップの内容を必ず変更してください。

ツールチップの位置を変更する（変換変換を使用）

ツールチップ＃1

最後になりましたが、ページの好きな場所にツールチップを再配置する必要があります。 この投稿のプレビューに表示されたのとまったく同じ結果を得るには、最初のツールチップテキストモジュールを開き、次の変換変換値を適用します。

• 右：-450px（デスクトップ）、-2000px（タブレット）、-1900px（電話）

ツールチップ＃2

2番目の列のツールチップテキストモジュールに移動し、変換変換値を次のように変更します。

• 右：-400px（デスクトップ）、-1300px（タブレット）、-1250px（電話）

ツールチップ＃3

列3のツールチップテキストモジュールに対して同じことを行うと、完了です。

• 右：-500px（デスクトップ）、-600px（タブレットと電話）

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、追加のプラグインを必要とせずに、ページの任意の場所にホバーツールチップを作成して配置する方法を示しました。 これは、ページに直接含めずに追加情報を追加するための優れた方法です。 このユースケースチュートリアルは、進行中のDiviデザインイニシアチブの一部であり、毎週、デザインツールボックスに何か特別なものを入れようとしています。 ご不明な点がございましたら、下のコメント欄に必ず質問を残してください！

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。