如何使用 Divi 在頁面上的任何位置放置懸停工具提示

每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。

本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用 Divi 在頁面上的任何位置創建和放置懸停工具提示。 這是與訪問者共享輔助信息的好方法，而無需立即將其直接包含在頁面上。

讓我們開始吧！

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載懸停工具提示佈局

要使用免費的懸停工具提示佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

使用 Dog Walker 主頁佈局創建新頁面

添加新頁面

您需要做的第一件事是通過轉到Pages > Add New創建一個新頁面。 繼續為您的頁面命名，發布頁面並切換到 Visual Builder。

上傳 Dog Walker 登陸頁面

接下來將登錄頁面佈局上傳到您的頁面。 儘管我們將使用此佈局包來完成懸停工具提示技術，但您可以將此方法應用於您正在處理的任何類型的佈局。

創建懸停工具提示設計

將新行添加到部分底部

列結構（決定您需要多少工具提示）

上傳登錄頁面佈局後，就可以開始創建懸停工具提示了。 我們會將它們添加到頁面上的特定位置，但您可以使用轉換翻譯選項將它們放置在任何位置。 在頁面上找到以下部分並在其底部添加一個三列行：

行最大寬度

為了確保工具提示設計出現在正確的位置，我們將使用與其上方的行相同的行最大寬度。 轉到行的大小設置並相應地調整最大寬度：

• 最大寬度：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 的樣式。 在工具提示文本模塊正下方添加一個代碼模塊。

將 CSS 代碼添加到文本模塊中的樣式 Div

添加以下 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>

克隆工具提示文本模塊兩次並放置在剩餘列中

完成第一列後，您可以克隆工具提示文本模塊兩次，並將重複項放置在該行的其餘兩列中。

更改工具提示內容

確保更改每個重複項的工具提示內容。

更改工具提示位置（使用 Transform Translate）

工具提示 #1

最後但並非最不重要的一點是，我們需要在頁面上的任何位置重新定位工具提示。 要實現與本文預覽中顯示的完全相同的結果，請打開第一個工具提示文本模塊並應用以下轉換轉換值：

• 右：-450px（桌面）、-2000px（平板）、-1900px（手機）

工具提示 #2

移至第二列中的工具提示文本模塊，並按如下方式更改變換翻譯值：

• 右：-400px（桌面）、-1300px（平板）、-1250px（手機）

工具提示 #3

對第 3 列中的工具提示文本模塊執行相同的操作，您就完成了！

• 右：-500px（桌面），-600px（平板和手機）

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何在不需要額外插件的情況下在頁面上的任何位置創建和放置懸停工具提示。 這是添加其他信息的好方法，而無需直接將其包含在您的頁面上。 這個用例教程是我們正在進行的 Divi 設計計劃的一部分，我們每週都會嘗試在您的設計工具箱中添加一些額外的東西。 如果您有任何問題，請務必在下面的評論部分留下問題！

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。