0°

WordPress: 简单实现 Tooltip提示框

WordPress短代码是一种非常有用的自定义网站和添加新功能的方法。您不必自己编写任何代码。如果您一直在使用WordPress内容管理系统,或者已经安装了任何插件,那么您可能遇到过“短代码”这个术语。当然,这个术语并不是很好解释的,所以您可能想知道WordPress短代码是什么?很快您就会知道这个问题的确切答案,更有用的是,如何将它们添加到您自己的网站上。

一、增加 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;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

– PS0: 那个圆圈是用 css3 实现的,所以 IE8 下面会变成方框……需要支持 IE8 的朋友自己改成背景图方式吧。

– PS1: tip 内容用了 2 个容器的目的是为了让 tip 内容显示能 width:auto 效果,也就是说 .tip-content 的 width 起到 max-width 效果,然后 .tip-content-inner 就有了类似 max-width 的属性效果了

三、用法:在文章编辑器里面只要输入如下格式的短代码

[tooltip tip="提示内容"]

、效果

WordPress: 简单实现 Tooltip提示框

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
限时红包
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论