WordPress 简单实现 Tooltip 提示信息实例

【增加 shortcode：把下面的代码扔到主题的 functions.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(); ?>
        ?
                $return = ob_get_clean();
    return $return;
}

【然后是 css】

.tooltip{
    position: relative;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
   
    line-
    vertical-align: middle;
}
.tooltip-icon{
    display: block;
   
   
    line-
    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;
   
}
.tip-content-inner{
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: auto;
    max-
    padding: 10px;
    line-
    border: 1px solid #ccc;
    background: #fff;
    line-
    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-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-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 的属性效果了（呃，好??拢?br />
【用法】

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

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

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

是不是感觉很简单吧。