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

在編輯大量專(zhuān)業(yè)的知識(shí)時(shí)我們往往需要對(duì)一些比較生僻的詞匯進(jìn)行解釋或是對(duì)一些引用內(nèi)容進(jìn)行介紹，如果直接在文本中寫(xiě)就的話，就很容易打亂文本整體的連貫性，這一節(jié)的wordpress開(kāi)發(fā)就教大家如何實(shí)現(xiàn)簡(jiǎn)單的Tooltip提示框。

• 代碼來(lái)源：詳情

效果如下：

代碼部署：

在主題根目錄下的 functions.php 文件中的<?php下面添加以下代碼：

// [tooltip tip=""]
add_shortcode('tooltip', 'shortcode_tooltip');
function shortcode_tooltip($attrs, $content = null) {
	$return = '';
	extract(shortcode_atts(array(
		'tip' => "",
	), $attrs));
		ob_start(); ?>
		<span class="tooltip"><span class="tooltip-icon">?</span><span class="tip-content"><span class="tip-content-inner"><?php echo $tip; ?></span></span></span>
		<?php
		$return = ob_get_clean();
	return $return;
}

在主題根目錄下的style.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;
}

使用：

在文章編輯器里面只要輸入如下格式的短代碼：

[tooltip tip=”提示內(nèi)容”]

提示：

– PS0: 那個(gè)圓圈是用 css3 實(shí)現(xiàn)的，所以 IE8 下面會(huì)變成方框……需要支持 IE8 的朋友自己改成背景圖方式吧。
– PS1: tip 內(nèi)容用了 2 個(gè)容器的目的是為了讓 tip 內(nèi)容顯示能 width:auto 效果，也就是說(shuō) .tip-content 的 width 起到 max-width 效果，然后 .tip-content-inner 就有了類(lèi)似 max-width 的屬性效果了

相關(guān)：

擴(kuò)展：

如果你擔(dān)心自己的原創(chuàng)內(nèi)容被被輕易的復(fù)制，那么在被人復(fù)制時(shí)加一個(gè)提示會(huì)是一個(gè)不錯(cuò)的選擇，參考這一篇wordpres開(kāi)發(fā)教程來(lái)增添這一小功能吧。