释放双眼,带上耳机,听听看~!
一、增加 shortcode
把下面的代码扔到主题的 functions.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;
}
二、将以下CSS代码添加到css文件最后
.tooltip{ position: relative; margin-left: 5px; margin-right: 5px; height: 16px; line-height: 16px; top: -.5em; vertical-align: baseline; } .tooltip-icon{ border: 1px solid #c01e22; border-radius: 50%; font-size: 12px; font-weight: 700; font-family: "caption", Arial; color:#c01e22 } .tip-content{ z-index: 999999; display: none; position: absolute; left: -5px; bottom: 30px; width: 240px; } .tip-content-inner{ position: absolute; bottom: 0; left: 0; text-indent: 0em; display: block; width: auto; max-width: 200px; padding: 10px; line-height: 20px; border: 1px solid #c01e22; background: #fff; line-height: 20px; color: #333; font-size: 14px; } .tip-content-inner:before{ content: ""; position: absolute; left: 7px; bottom: -24px; border-style: solid solid solid solid; border-color: #c01e22 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="提示内容"]
四、效果

相关专题

wordpress
WordPress是一款个人博客系统,并逐步演化成一款内容管理系统软件,它是使用PHP语言和MySQL数据库开发的。用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。 wordpress 推荐模板/插件 虚位以待 马上入驻 虚位以待 马上入驻 虚位以待 马上入驻 推荐服务商 虚位…
经测试发现,.tooltip:hover > .tip-content{display部分代码缺失
应该为:.tooltip:hover > .tip-content{display}
我找到了另外一篇可用的,这个就不测试了,o(* ̄▽ ̄*)o
感谢反馈 已补完善