WordPress: 简单实现 Tooltip提示框教程

释放双眼,带上耳机,听听看~!

一、增加 shortcode

把下面的代码扔到主题的 functions. 文件的 中

// [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- 的 width 起到 max-width 效果,然后 .tip--inner 就有了类似 max-width 的属性效果了

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

[tooltip tip="提示内容"]

、效果

WordPress: 简单实现 Tooltip提示框

联系作者:

相关专题

wordpress

Wordpress WordPress是一款个人博客系统,并逐步演化成一款内容管理系统软件,它是使用PHP语言和MySQL数据库开发的。用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。 立刻购买 交流圈子 推荐模板/插件 虚位以待 马上入驻 虚位以待 马上入驻 虚位以待 马上入…

为TA充电
共{{data.count}}人
人已赞赏

【龙萱坤诺】声明:

龙萱坤诺所有资源来源于网络及用户分享或为本站原创,仅限用于学习和研究,如有侵权请邮件联系站长!不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站概不负责!

 

龙萱坤诺欢迎您投稿发表文章,更有龙萱坤诺奖励和额外收入!根据投稿内容质量,可获邀入驻本平台,开启您的站长之路!

 

如有链接无法下载、失效或广告,请到论坛反馈!

联系我们

© 转载请声明:转载自“龙萱坤诺"

网站开发

WordPress系统删除文章时自动删除图片附件教程

2019-3-6 16:57:59

网站开发

WordPress配置Memcached内存缓存为网站加速

2019-3-6 17:02:21

2 条回复 A文章作者 M管理员
  1. 牧泽

    经测试发现,.tooltip:hover > .tip-content{display部分代码缺失
    应该为:.tooltip:hover > .tip-content{display}

    我找到了另外一篇可用的,这个就不测试了,o(* ̄▽ ̄*)o

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

热门专栏

文章发布排行

更多
  • 官方编辑

    仁师lv9

    文章

    6170

    评论

    4

    粉丝

    6

    关注

    0

    龙萱坤诺官方编辑员
  • 玩机技巧

    初学子lv0

    文章

    722

    评论

    2

    粉丝

    2

    关注

    0

    分享最新、最热的玩机教程。有需要的教程也可以圈子发帖提需求呦。
  • 微客创赢

    坛圣lv13

    文章

    297

    评论

    27

    粉丝

    8

    关注

    4

    程序员小白
  • 龙萱坤诺

    坛圣lv13

    文章

    141

    评论

    67

    粉丝

    7

    关注

    5

    龙萱坤诺管理员
  • wordpress建站

    有学者lv2

    文章

    82

    评论

    12

    粉丝

    2

    关注

    0

    Wordpress建站服务商