|
|
|
|
|
工具提示(Tooltips)是通過(guò)用戶觸發(fā)(一般是鼠標(biāo)懸?;螯c(diǎn)擊文字)來(lái)提供有關(guān)頁(yè)面元素和功能的更多信息。在網(wǎng)頁(yè)設(shè)計(jì)中,工具提示(Tooltips)的使用非常廣泛。在本文實(shí)例中,使用純CSS3來(lái)實(shí)現(xiàn)工具提示(Tooltips),不需要用到Javascript,不需要用到圖片,更不需要引用jQuery庫(kù)文件,可謂簡(jiǎn)單又實(shí)用,符合拿來(lái)即用的特點(diǎn)。
純CSS3工具提示(Tooltips)
.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}
.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltip:hover
{
border: 0; /* IE6 fix */
}
.tooltip:hover span
{
visibility: visible;
}
.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}
/* Yellow */
.yellow-tooltip span
{
border-color: #e1ca82;
background-color: #ffeaa6;
}
.yellow-tooltip span:after
{
border-top-color: #ffeaa6;
}
.yellow-tooltip span:before
{
border-top-color: #e1ca82;
}
/* Navy */
.navy-tooltip span
{
color: #fff;
text-shadow: 0 1px 0 #000;
border-color: #161a1f;
background-color: #1e2227;
}
.navy-tooltip span:after
{
border-top-color: #1e2227;
}
.navy-tooltip span:before
{
border-top-color: #161a1f;
}
/* Blue */
.blue-tooltip span
{
border-color: #59add4;
background-color: #61bde7;
}
.blue-tooltip span:after
{
border-top-color: #61bde7;
}
.blue-tooltip span:before
{
border-top-color: #59add4;
}
/* Pink */
.pink-tooltip span
{
border-color: #ce4378;
background-color: #ea4c88;
}
.pink-tooltip span:after
{
border-top-color: #ea4c88;
}
.pink-tooltip span:before
{
border-top-color: #ce4378;
}
<h3>灰色 工具提示</h3>
<p>卡卡網(wǎng)建立于2009年4月,本站旨在為廣大網(wǎng)站建設(shè)人員提供專業(yè)的<a href="#" class="tooltip">網(wǎng)站測(cè)速<span><b>可選標(biāo)題</b><br>這是灰色CSS3工具提示。</span></a>和優(yōu)化服務(wù),以及為廣大網(wǎng)民提供<a href="#" class="tooltip">網(wǎng)絡(luò)速度測(cè)試<span>這是CSS3另一個(gè)灰色工具提示</span></a>服務(wù)。</p>
<h3>黑色 工具提示</h3>
<p>卡卡網(wǎng)建立于2009年4月,本站旨在為廣大網(wǎng)站建設(shè)人員提供專業(yè)的<a href="#" class="tooltip navy-tooltip">網(wǎng)站測(cè)速<span><b>可選標(biāo)題</b><br>這是黑色CSS3工具提示。</span></a>和優(yōu)化服務(wù),以及為廣大網(wǎng)民提供<a href="#" class="tooltip navy-tooltip">網(wǎng)絡(luò)速度測(cè)試<span>這是CSS3另一個(gè)黑色工具提示</span></a>服務(wù)。</p>
使用說(shuō)明
為需要工具提示(Tooltips)的文字添加a
標(biāo)簽并設(shè)置該a
標(biāo)簽的類屬性class="tooltip"
,提示文字寫在span
標(biāo)簽里。
默認(rèn)是灰色提示框背景。本實(shí)例代碼提供了5種可選顏色。使用其他顏色只需在class="tooltip"
里添加相應(yīng)的類名,如class="tooltip navy-tooltip"
是黑色背景框。