Blog

WordPress: 简单实现 Tooltip

这个是最近碰到的一个小需求,然后想了下用了 shortcode + css 实现,可能有些朋友需要吧,反正文囧那么久了,顺便贴一下代码吧。

增加 shortcode:把下面的代码扔到主题的 functions.php 文件的 <?php ?> 中,具体的方法说明请搜/查看 WordPress 函数 add_shortcode】

// [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;
}

然后是 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;
}

- PS0: 那个圆圈是用 css3 实现的,所以 IE8 下面会变成方框……需要支持 IE8 的朋友自己改成背景图方式吧。
- PS1: tip 内容用了 2 个容器的目的是为了让 tip 内容显示能 width:auto 效果,也就是说 .tip-content 的 width 起到 max-width 效果,然后 .tip-content-inner 就有了类似 max-width 的属性效果了(呃,好啰嗦)

用法

在文章编辑器里面只要输入如下格式的短代码
[tooltip tip="提示内容"]

就会出现这样的东西:那个圈住的问号

140819-tooltip-1

鼠标 hover 那个圈住的问号就会显示提示内容了:Demo

140819-tooltip-2

简单吧。

----吐-槽-线----

最近才知道,以前学生时代的自己在班级里面的存在感原来是那么弱的,好囧啊,怎么没变成漫画主角呢,Orz

zww
or
oooo

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: https://zww.me/wordpress-tooltip-shortcode.z-turn

56 comments

  1. 牧风 牧风 Google Chrome 36 Google Chrome 36 Mac OS X 10.9 Mac OS X 10.9

    先杀了再说

    沙发
  2. 放射学 放射学 Firefox 25 Firefox 25 Windows 7 Windows 7

    不明觉厉,好久扒了用上 :mrgreen:

    板凳
  3. maillot saxo bank maillot saxo bank Google Chrome 30 Google Chrome 30 Windows 7 Windows 7

    难得你更新了。

    地板
  4. ......
  5. W3Cshare W3Cshare Google Chrome 32 Google Chrome 32 Windows 8.1 Windows 8.1

    大叔最近比较忙啊 :mrgreen: :mrgreen:

    21楼
  6. axiu axiu Google Chrome 36 Google Chrome 36 Windows 7 Windows 7

    是去参加同学聚会了吗?

    22楼
    • zwwooooo zwwooooo Firefox 31 Firefox 31 Windows 8.1 Windows 8.1

      @axiu
      下午聚会,12点多才发微信通知我,我能去么?不是同一个城市啊,走不开

  7. ilikecss ilikecss Google Chrome 36 Google Chrome 36 Windows 7 Windows 7

    不错实用的效果!

    23楼
  8. 西门 西门 Google Chrome 37 Google Chrome 37 Mac OS X 10.9 Mac OS X 10.9

    z-index: 999999;这种就少用吧,以后要维护你代码的人要吐血,只能写9999999999999999

    24楼
    • 甜菜 甜菜 Sogou Explorer Sogou Explorer Windows 8.1 Windows 8.1

      @西门
      当你看见大发的主题时,会被那一堆一堆的fuck吓吐血的...

    • zwwooooo zwwooooo Firefox 31 Firefox 31 Windows 8.1 Windows 8.1

      @西门
      这个就不鸟了,反正要折腾得自己知道折腾啥,不要 copy 就用,特别是搞正规的项目

  9. 大猫 大猫 Google Chrome 37 Google Chrome 37 Windows 7 Windows 7

    这个简单,省的用插件了

    25楼
  10. 甜菜 甜菜 Sogou Explorer Sogou Explorer Windows 8.1 Windows 8.1

    PS:看大发的推...准备退出WP界么...额.... :shock:

    26楼
    • zwwooooo zwwooooo Firefox 31 Firefox 31 Windows 8.1 Windows 8.1

      @甜菜
      没有界如何谈退,大家就是玩玩,玩与不玩随意啦

    • 甜菜 甜菜 Sogou Explorer Sogou Explorer Windows 8.1 Windows 8.1

      @zwwooooo
      也是...现在WordPress博客也就是一群博主互访了... :evil:

  11. 知儿网 知儿网 CoolNovo 2 CoolNovo 2 Windows 7 Windows 7

    又学到一招。

    27楼
  12. 咚门 咚门 Google Chrome 36 Google Chrome 36 Windows 8.1 Windows 8.1

    短代码真是功能强大,不过现在我除了用音乐的其他都没用过了

    28楼
  13. 碎碎念ZWS 碎碎念ZWS Google Chrome 35 Google Chrome 35 Windows 7 Windows 7

    这么肥,摘了

    29楼
  14. Danny Danny Google Chrome 38 Google Chrome 38 Windows 8.1 Windows 8.1

    大爱。 :razz: 赶紧扒回去

    30楼
  15. 老董博客 老董博客 Firefox 33 Firefox 33 Windows 8.1 Windows 8.1

    这个效果用户体验还是很好的。

    31楼
  16. 胡倡萌 胡倡萌 Google Chrome 39 Google Chrome 39 Windows 8.1 Windows 8.1

    很不错的效果,就是不知道在 rss 订阅中会不会直接显示出提示文字,如果会,可能会干扰阅读,呵呵

    32楼
  17. 帅气小琦琦 帅气小琦琦 Google Chrome 49 Google Chrome 49 Windows 10 Windows 10

    功能还是有效的 只是不知道会不会经常用

    33楼

Leave a Reply