web前端學習（二十九）——CSS3提示工具的相關設定
阿新 • • 發佈：2021-02-10
技術標籤：web前端學習（HTML5+CSS3+JavaScript）
1.CSS基礎提示框(Tooltip)
HTML)使用容器元素 (like <div>) 並新增"tooltip"類。在滑鼠移動到 <div> 上時顯示提示資訊。
提示文字放在內聯元素上(如 <span>) 並使用class="tooltiptext"。
CSS)tooltip類使用position:relative, 提示文字需要設定定位值position:absolute。注意:接下來的例項會顯示更多的定位效果。
tooltiptext
類用於實際的提示文字。模式是隱藏的，在滑鼠移動到元素顯示 。設定了一些寬度、背景色、字型色等樣式。CSS3border-radius屬性用於為提示框新增圓角。
:hover選擇器用於在滑鼠移動到到指定元素 <div> 上時顯示的提示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>CSS簡單學習</title> <style type="text/css"> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; padding: 5px 0; border-radius: 6px; text-align: center; background-color: black; color: white; /* 定位，提示資訊顯示在右側 */ position: absolute; z-index: 1; top: -5px; left: 105%; /* 定位，提示資訊顯示在左側 position: absolute; z-index: 1; top: -5px; right: 105%; */ /* 定位，提示資訊顯示在頭部 position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; */ /* 定位，提示資訊顯示在底部 position: absolute; z-index: 1; top: 100%; left: 50%; margin-left: -60px; */ } .tooltip:hover .tooltiptext { visibility: visible; } </style> </head> <body> <div class="tooltip"> 滑鼠移動到這裡 <span class="tooltiptext">提示文字</span> </div> </body> </html>
2.CSS提示工具中新增箭頭
我們可以用CSS 偽元素 ::after 及 content 屬性為提示工具建立一個小箭頭標誌，箭頭是由邊框組成的，但組合起來後提示工具像個語音資訊框。
在提示工具內定位箭頭:top: 100%, 箭頭將顯示在提示工具的底部。left: 50%用於居中對齊箭頭。
注意：border-width屬性指定了箭頭的大小。如果你修改它，也要修改margin-left值。這樣箭頭在能居中顯示。
border-color用於將內容轉換為箭頭。設定頂部邊框為黑色，其他是透明的。如果設定了其他的也是黑色則會顯示為一個黑色的四邊形。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>CSS簡單學習</title> <style type="text/css"> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; padding: 5px 0; border-radius: 6px; text-align: center; background-color: black; color: white; /* 頂部提示框/底部箭頭 */ position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px; /* 底部提示框/頂部箭頭 position: absolute; z-index: 1; top: 150%; left: 50%; margin-left: -60px; */ /* 右側提示框/左側箭頭 position: absolute; z-index: 1; top: -5px; left: 110%; */ /* 左側提示框/右側箭頭 position: absolute; z-index: 1; top: -5px; right: 110%; */ } .tooltip .tooltiptext::after { content: ""; position: absolute; /* 頂部提示框/底部箭頭 */ top: 100%; left: 50%; margin-left: -5px; /* 底部提示框/頂部箭頭 bottom: 100%; left: 50%; margin-left: -5px; */ /* 右側提示框/左側箭頭 top: 50%; right: 100%; margin-top: -5px; */ /* 左側提示框/右側箭頭 top: 50%; left: 100%; margin-top: -5px; */ border-width: 5px; border-style: solid; /* 頂部提示框/底部箭頭 */ border-color: black transparent transparent transparent; /* 底部提示框/頂部箭頭 border-color: transparent transparent black transparent; */ /* 右側提示框/左側箭頭 border-color: transparent black transparent transparent; */ /* 左側提示框/右側箭頭 border-color: transparent transparent transparent black; */ } .tooltip:hover .tooltiptext { visibility: visible; } </style> </head> <body> <h2>頂部提示框/底部箭頭</h2> <div class="tooltip">滑鼠移動到這裡 <span class="tooltiptext">提示文字</span> </div> </body> </html>
3.CSS提示工具的淡入效果
可以使用 CSS3 transition 屬性及 opacity 屬性來實現提示工具的淡入效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS簡單學習</title>
<style type="text/css">
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
padding: 5px 0;
border-radius: 6px;
text-align: center;
background-color: black;
color: white;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* 淡入 1秒內從 0% 到 100% 顯示: */
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<h2>提示工具淡入效果</h2>
<p>滑鼠移動到以下元素，提示工具會在1秒內從 0% 到 100% 完全顯示。</p>
<div class="tooltip">滑鼠移動到這裡
<span class="tooltiptext">提示文字</span>
</div>
</body>
</html>