WordPress: 简单实现 Tooltip提示框

一、增加 shortcode

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

  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' => "",
  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代码添加到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=”提示内容”]

查看该效果

文章链接:https://www.sbkko.com/1-6.html
文章标题:WordPress: 简单实现 Tooltip提示框
文章版权:SBKKO 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    文章网站笔记

    一生遇到过许多裂缝,夜空是最大的一条

    2017-11-12 14:31:15

    WP文章文章

    WordPress 免插件给文章添加文章索引/文章目录

    2017-11-14 13:37:29

    0 条回复 A文章作者 M管理员
    肆意发布无意义灌水形式的评论,将被关小黑屋哦!
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索