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' => "",//开源软件: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; 
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="提示内容"]