怎么添加Tooltip提示框？ - css筆記

通過CSS的Tooltip提示框，我們可以在頁面中一些需要進(jìn)行內(nèi)容補(bǔ)充的地方添加一個(gè)符號(hào)，訪客將鼠標(biāo)移動(dòng)到該符號(hào)或是點(diǎn)擊該符號(hào)，即可查看相關(guān)補(bǔ)充內(nèi)容。這一次的CSS筆記向大家介紹下相關(guān)內(nèi)容。

• 技術(shù)支持：菜鳥教程

方案一：鏈接法

這種提示框用CSS很好展示，給一個(gè)問好加上園圈就好了，例如這樣：

<a target="_blank" href="http://www.kartiktrivedi.com/#"style="display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    background: hsla(0,0%,100%,.1);
    text-align: center;
    color: #111;
    font-family: REEJI-BigYoung-BoldGB;
    font-size: 14px;
    border: 1px solid;
    border-radius: 100%;														">?</a> 

效果展示：

方案二：文本提示

當(dāng)然，如果只是一些簡單的提醒，專門做個(gè)頁面進(jìn)行介紹就不太適合了，可以試試這個(gè)，當(dāng)鼠標(biāo)移到到圖標(biāo)上，就有文本提示：

   <span class="tooltip"><span class="tooltip-icon">?</span><span class="tip-content">
	   <span class="tip-content-inner">
		   Tooltip提示框
		</span>
	</span>
   </span>
<style type="text/css">

.tooltip{
	position: relative;
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
	height: 16px;
	line-height: 16px;
	vertical-align: middle;
}
.tooltip-icon{
	display: block;
	width: 14px;
	height: 14px;
	line-height: 14px;
	border: 1px solid #999;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	font-family: "caption", Arial;
	text-align: center;
}
.tip-content{
	z-index: 999999;
	display: none;
	position: absolute;
	left: -5px;
	bottom: 30px;
	width: 240px;
}
.tip-content-inner{
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: auto;
	max-width: 200px;
	padding: 10px;
	line-height: 20px;
	border: 1px solid #ccc;
	background: #fff;
	line-height: 20px;
	color: #333;
	font-size: 16px;
}
.tip-content-inner:before{
	content: "";
	position: absolute;
	left: 7px;
	bottom: -24px;
	border-style: solid solid solid solid;
	border-color: #ccc transparent transparent transparent;
	border-width: 12px 6px;
}
.tip-content-inner:after{
	content: "";
	position: absolute;
	left: 8px;
	bottom: -20px;
	border-style: solid solid solid solid;
	border-color: #fff transparent transparent transparent;
	border-width: 10px 5px;
}
.tooltip:hover > .tip-content{
	display: block;
}

</style>

效果展示：

代碼來源：

怎么實(shí)現(xiàn)簡單的Tooltip提示框？ - wordpress開發(fā)

Muze

• 20年4月18日
• 喜歡：0
• 瀏覽：212