WordPress 简单实现 Tooltip 提示信息实例
发布时间：2022-06-24 11:45:59 所属栏目：教程 来源：互联网
导读：有一个小需求,就是要在wordpress上实现一个小提示功能,把鼠标放在问号上就显示,代码是用 shortcode + css 实现的,需要的朋友可以参考一下. 增加 shortcode:把下面的代码扔到主题的 functions.php 文件的 ?php ? 中,具体的方法说明请搜/查看 WordPress 函数 a
|
有一个小需求,就是要在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="提示内容"]。 （编辑：天瑞地安资讯网_保定站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐