卡卡網(wǎng)

工具提示(Tooltips)是通過用戶觸發(fā)（一般是鼠標懸停或點擊文字）來提供有關(guān)頁面元素和功能的更多信息。在網(wǎng)頁設(shè)計中，工具提示(Tooltips)的使用非常廣泛。在本文實例中，使用純CSS3來實現(xiàn)工具提示(Tooltips)，不需要用到Javascript，不需要用到圖片，更不需要引用jQuery庫文件，可謂簡單又實用，符合拿來即用的特點。

純CSS3工具提示(Tooltips)

CSS代碼

.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;
}

html代碼

<h3>灰色 工具提示</h3>
<p>卡卡網(wǎng)建立于2009年4月，本站旨在為廣大網(wǎng)站建設(shè)人員提供專業(yè)的<a href="#" class="tooltip">網(wǎng)站測速<span><b>可選標題</b><br>這是灰色CSS3工具提示。</span></a>和優(yōu)化服務(wù)，以及為廣大網(wǎng)民提供<a href="#" class="tooltip">網(wǎng)絡(luò)速度測試<span>這是CSS3另一個灰色工具提示</span></a>服務(wù)。</p>


<h3>黑色 工具提示</h3>
<p>卡卡網(wǎng)建立于2009年4月，本站旨在為廣大網(wǎng)站建設(shè)人員提供專業(yè)的<a href="#" class="tooltip navy-tooltip">網(wǎng)站測速<span><b>可選標題</b><br>這是黑色CSS3工具提示。</span></a>和優(yōu)化服務(wù)，以及為廣大網(wǎng)民提供<a href="#" class="tooltip navy-tooltip">網(wǎng)絡(luò)速度測試<span>這是CSS3另一個黑色工具提示</span></a>服務(wù)。</p>

execcodegetcode

使用說明

為需要工具提示(Tooltips)的文字添加a標簽并設(shè)置該a標簽的類屬性class="tooltip"，提示文字寫在span標簽里。

默認是灰色提示框背景。本實例代碼提供了5種可選顏色。使用其他顏色只需在class="tooltip"里添加相應(yīng)的類名，如class="tooltip navy-tooltip"是黑色背景框。

標簽: css  css3  工具提示  Tooltips