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

有一个小需求,就是要在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' => "",//开源软件:phpfensi.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;
  13. }

然后是 css

  1. .tooltip{
  2. position: relative;
  3. display: inline-block;
  4. margin-left: 5px;
  5. margin-right: 5px;
  6. height: 16px;
  7. line-height: 16px;
  8. vertical-align: middle;
  9. }
  10. .tooltip-icon{
  11. display: block;
  12. width: 14px;
  13. height: 14px;
  14. line-height: 14px;
  15. border: 1px solid #999;
  16. border-radius: 50%;
  17. font-size: 12px;
  18. font-weight: 700;
  19. font-family: "caption", Arial;
  20. text-align: center;
  21. }
  22. .tip-content{
  23. z-index: 999999;
  24. display: none;
  25. position: absolute;
  26. left: -5px;
  27. bottom: 30px;
  28. width: 240px;
  29. }
  30. .tip-content-inner{
  31. position: absolute;
  32. bottom: 0;
  33. left: 0;
  34. display: block;
  35. width: auto;
  36. max-width: 200px;
  37. padding: 10px;
  38. line-height: 20px;
  39. border: 1px solid #ccc;
  40. background: #fff;
  41. line-height: 20px;
  42. color: #333;
  43. font-size: 16px;
  44. }
  45. .tip-content-inner:before{
  46. content: "";
  47. position: absolute;
  48. left: 7px;
  49. bottom: -24px;
  50. border-style: solid solid solid solid;
  51. border-color: #ccc transparent transparent transparent;
  52. border-width: 12px 6px;
  53. }
  54. .tip-content-inner:after{
  55. content: "";
  56. position: absolute;
  57. left: 8px;
  58. bottom: -20px;
  59. border-style: solid solid solid solid;
  60. border-color: #fff transparent transparent transparent;
  61. border-width: 10px 5px;
  62. }
  63. .tooltip:hover > .tip-content{
  64. display: block;
  65. }

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

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

用法:

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

[tooltip tip="提示内容"]