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