CSS 提示工具(Tooltip)

Shisui 發(fā)布于2019-08-30 15:54 / 2358人閱讀

摘要：提示工具本文為大家介紹如何使用和來(lái)實(shí)現(xiàn)提示工具，提示工具在鼠標(biāo)移動(dòng)到制定元素后觸發(fā)先看下面示例基礎(chǔ)提示工具代碼如下右提示工具右提示工具提示工具運(yùn)行結(jié)果如下圖添加箭頭我們可以用偽元素及屬性為提示工具創(chuàng)建一個(gè)小箭頭標(biāo)志，箭頭是

CSS 提示工具(Tooltip) 本文為大家介紹如何使用HTML和CSS來(lái)實(shí)現(xiàn)提示工具， 提示工具在鼠標(biāo)移動(dòng)到制定元素后觸發(fā),先看下面示例：

1.基礎(chǔ)提示工具代碼如下：

運(yùn)行結(jié)果如下圖：

2.添加箭頭

我們可以用CSS 偽元素 ::after 及 content 屬性為提示工具創(chuàng)建一個(gè)小箭頭標(biāo)志，箭頭是由邊框組成的

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%; 
    margin-left: -60px; /* 使用一半寬度 (120/2 = 60) 來(lái)居中提示工具 */
}

3.技術(shù)要點(diǎn)：

父元素相對(duì)定位

提示框絕對(duì)定位

箭頭絕對(duì)定位

淡入效果（我們可以使用 CSS3 transition 屬性及 opacity 屬性來(lái)實(shí)現(xiàn)提示工具的淡入效果）

持續(xù)更新，歡迎大家指教！

GPU云服務(wù)器云服務(wù)器 tooltip提示提示工具 css工具 css開發(fā)工具

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/116901.html

相關(guān)文章

css--提示工具

摘要：一提示工具上提示工具代碼如下上提示工具提示文本運(yùn)行結(jié)果二右提示工具代碼如下提示工具右提示工具提示文本運(yùn)行結(jié)果總結(jié)使用容器元素并添加類。在鼠標(biāo)移動(dòng)到上時(shí)顯示提示信息。屬性用于為提示框添加圓角。一、提示工具 1、上提示工具代碼如下 body{ margin:0; text-align:center; ...

shadajin 2019-08-02 10:55 評(píng)論0 收藏0
css--提示工具

摘要：一提示工具上提示工具代碼如下上提示工具提示文本運(yùn)行結(jié)果二右提示工具代碼如下提示工具右提示工具提示文本運(yùn)行結(jié)果總結(jié)使用容器元素并添加類。在鼠標(biāo)移動(dòng)到上時(shí)顯示提示信息。屬性用于為提示框添加圓角。一、提示工具 1、上提示工具代碼如下 body{ margin:0; text-align:center; ...

xinhaip 2019-08-30 15:54 評(píng)論0 收藏0
CSS 提示工具(Tooltip)

摘要：提示工具本文為大家介紹如何使用和來(lái)實(shí)現(xiàn)提示工具，提示工具在鼠標(biāo)移動(dòng)到制定元素后觸發(fā)先看下面示例基礎(chǔ)提示工具代碼如下右提示工具右提示工具提示工具運(yùn)行結(jié)果如下圖添加箭頭我們可以用偽元素及屬性為提示工具創(chuàng)建一個(gè)小箭頭標(biāo)志，箭頭是 CSS 提示工具(Tooltip) 本文為大家介紹如何使用HTML和CSS來(lái)實(shí)現(xiàn)提示工具，提示工具在鼠標(biāo)移動(dòng)到制定元素后觸發(fā),先看下面示例： showImg(ht...

cc17 2019-08-02 10:55 評(píng)論0 收藏0
CSS 提示工具(Tooltip)

摘要：本文的內(nèi)容為使用與來(lái)創(chuàng)建提示工具，提示工具在鼠標(biāo)移動(dòng)到指定元素后觸發(fā)。這個(gè)提示工具可以使我們排出的網(wǎng)頁(yè)增加美感，也可以提升用戶的可讀性。本文的內(nèi)容為使用 HTML 與 CSS 來(lái)創(chuàng)建提示工具，提示工具在鼠標(biāo)移動(dòng)到指定元素后觸發(fā)。這個(gè)提示工具可以使我們排出的網(wǎng)頁(yè)增加美感，也可以提升用戶的可讀性。（提示工具可以四周提示這里只演示上和右，左和下的同理調(diào)調(diào)距離就可以實(shí)現(xiàn)了）一、提示內(nèi)容在上...

ACb0y 2019-08-30 15:54 評(píng)論0 收藏0
如何使用CSS創(chuàng)建巧妙的動(dòng)畫提示框

摘要：我們巧妙的提示框打算使用屬性選擇器也就是方括號(hào)表示法。相對(duì)性這是用在提示框的父元素上的。向上向下提示框要用到關(guān)鍵幀，而向左向右提示框使用關(guān)鍵幀。注意，在這些關(guān)鍵幀中，我們只定義了提示框所需的終止?fàn)顟B(tài)。原文：https://webdesign.tutsplus.co...原作：Jase Smith翻譯：Stypstive 當(dāng)你的用戶需要漂亮的圖標(biāo)給出額外的文字信息時(shí)，亦或是當(dāng)他們?cè)邳c(diǎn)擊...

wmui 2019-08-29 12:51 評(píng)論0 收藏0