CSS 提示工具(Tooltip)

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

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

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

1.基礎提示工具代碼如下：

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

2.添加箭頭

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

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

3.技術要點：

父元素相對定位

提示框絕對定位

箭頭絕對定位

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116901.html

css--提示工具

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

shadajin 2019-08-02 10:55 評論0 收藏0
css--提示工具

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

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

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

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

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

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

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

wmui 2019-08-29 12:51 評論0 收藏0