首页 > CMS > Wordpress > 正文

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

2024-09-07 00:51:42
字体:
来源:转载
供稿:网友

有一个小需求,就是要在wordpress上实现一个小提示功能,把鼠标放在问号上就显示,代码是用 shortcode + css 实现的,需要的朋友可以参考一下.

增加 shortcode:把下面的代码扔到主题的 functions.php 文件的 <?php ?> 中,具体的方法说明请搜/查看 WordPress 函数 add_shortcode:

  1. // [tooltip tip=""] 
  2. add_shortcode('tooltip''shortcode_tooltip'); 
  3. function shortcode_tooltip($attrs$content = null) { 
  4.     $return = ''
  5.     extract(shortcode_atts(array
  6.         'tip' => "",//开源软件:Vevb.com 
  7.     ), $attrs)); 
  8.         ob_start(); ?> 
  9.         <span class="tooltip"><span class="tooltip-icon">?</span><span class="tip-content"><span class="tip-content-inner"><?php echo $tip; ?></span></span></span> 
  10.         <?php 
  11.         $return = ob_get_clean(); 
  12.     return $return

然后是 css

  1. .tooltip{ 
  2.     positionrelative
  3.     display: inline-block
  4.     margin-left5px
  5.     margin-right5px
  6.     height16px
  7.     line-height16px
  8.     vertical-alignmiddle
  9. .tooltip-icon
  10.     displayblock
  11.     width14px
  12.     height14px
  13.     line-height14px
  14.     border1px solid #999
  15.     border-radius: 50%
  16.     font-size12px
  17.     font-weight700
  18.     font-family"caption"Arial
  19.     text-aligncenter
  20. .tip-content{ 
  21.     z-index999999
  22.     displaynone
  23.     positionabsolute
  24.     left: -5px
  25.     bottom: 30px
  26.     width240px
  27. .tip-content-inner{ 
  28.     positionabsolute
  29.     bottom: 0
  30.     left: 0
  31.     displayblock
  32.     widthauto
  33.     max-width200px
  34.     padding10px
  35.     line-height20px
  36.     border1px solid #ccc
  37.     background#fff
  38.     line-height20px
  39.     color#333
  40.     font-size16px
  41. .tip-content-inner:before{ 
  42.     content""
  43.     positionabsolute
  44.     left: 7px
  45.     bottom: -24px
  46.     border-stylesolid solid solid solid
  47.     border-color#ccc transparent transparent transparent
  48.     border-width12px 6px
  49. .tip-content-inner:after{ 
  50.     content""
  51.     positionabsolute
  52.     left: 8px
  53.     bottom: -20px
  54.     border-stylesolid solid solid solid
  55.     border-color#fff transparent transparent transparent
  56.     border-width10px 5px
  57. .tooltip:hover > .tip-content{ 
  58.     displayblock

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

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

用法:

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

[tooltip tip="提示内容"]

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表