WordPress 简单实现 Tooltip 提示信息实例
发布:smiling 来源: PHP粉丝网 添加日期:2015-03-21 10:29:55 浏览: 评论:0
有一个小需求,就是要在wordpress上实现一个小提示功能,把鼠标放在问号上就显示,代码是用 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' => "",//开源软件:phpfensi.com
- ), $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="提示内容"]
Tags: WordPress提示信息 Tooltip
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)