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

有一个小需求,就是要在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="提示内容"]

 

 

查看更多关于WordPress 简单实现 Tooltip 提示信息实例的详细内容...