WordPress短代码实现Tooltip提示框功能教程

互联网  2017-11-09 07:36:02  126 人阅读  39 条评论

投放广告联系   诚邀合作伙伴   赞助我们   垃圾评论惩罚

网络上有很多实现气泡提示框的教程都是利用 JS 实现,今天竟然在 ZWWoOoOo 大神站点中发现了一篇旧文章《WordPress: 简单实现 Tooltip》,这篇文章就是利用 WordPress 的短代码功能和一些 CSS 代码就实现了 Tooltip 提示框功能,所以今天就根据这个教程添加到本站的 Three 主题中(PS:其他主题请参照原文折腾,因为部分代码为了与主题匹配已经作了适当调整)。

Three 主题实现Tooltip提示框功能

1、在 Three 主题的 functions.php 文件中找到以下代码 ? 直接放代码会被替换,所以只能用图片代替了

WordPress短代码实现Tooltip提示框功能教程 WordPress 第1张

接着在适当位置或最后一个 ?> 的前面添加以下代码

  1. // Tooltip提示框
  2. add_shortcode('tooltip', 'shortcode_tooltip');
  3. function shortcode_tooltip($attrs, $content = null) {
  4.     extract(shortcode_atts(array('tip' => ""),$attrs));
  5.     return '<span class="tooltip"><span class="tooltip-icon">&nbsp;?&nbsp;</span><span class="tip-content"><span class="tip-content-inner">'.$tip.'</span></span></span>';
  6. }

2、将以下 CSS 代码添加到 css 文件最后

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

说明:

①那个提示的圆圈是用 css3 实现的,所以 IE8 下面会变成方框……需要支持 IE8 的朋友自己改成背景图方式吧(PS:可以使用图标字体来代替,我是懒得升级到 Font Awesome 4.7.0,要不然就直接使用图标字体了)。

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

③记得刷新本地缓存或者 CDN 缓存,要不然是无法及时看到修改后的 CSS 代码的。

Three 主题使用 Tooltip 提示框功能

在编辑文章的时候,只需要将光标放在想要插入提示图标的地方,然后点击编辑器上方的“提示图标”选择即可插入提示短代码,然后修改“提示内容”为自己想要提示的内容即可。

WordPress短代码实现Tooltip提示框功能教程 WordPress 第2张

具体我们来体验一下吧,只需要将鼠标放在那个带有圆圈的问号上方即可看到提示内容。具体请看下图或将鼠标放在旁边的提示图标 ? WordPress短代码实现Tooltip提示框功能教程示例上方测试即可。

WordPress短代码实现Tooltip提示框功能教程 WordPress 第3张

如果文章对你有帮助,请赞赏支持boke112导航发展!

历史上的今天:

文章标签: ,   ,  
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文内容来源于互联网资源,由  整理汇总,如有侵权请留言告知!
淘宝天猫无门槛专享优惠券

 发表评论


  1. 电烤箱什么牌子好
    电烤箱什么牌子好 【状元】 @回复

    [挖鼻屎] 好像有用,又好像不需要。

  2. 明月登楼
    明月登楼 【王爷】 @回复

    哈哈,我在 Begin 主题里也成功集成这个Tooltip代码了!不错!

  3. 夏天烤洋芋
    夏天烤洋芋 【状元】 @回复

    这个功能不错。等下研究看看加入。

  4. Parkmimi
    Parkmimi 【举人】 @回复

    不错不错,已添加

  5. 网赚乎
    网赚乎 【举人】 @回复

    这个功能有用,有时间折腾折腾。

  6. 小萝博客
    小萝博客 【状元】 @回复

    类似隐藏,不过这个更赞

  7. 群贤网
    群贤网 【小白】 @回复

    这个功能还是很不错的

  8. 一介小民
    一介小民 【状元】 @回复

    这功能不错哦

  9. 品牌馆
    品牌馆 【举人】 @回复

    这个功能好赞啊

  10. 夏日博客
    夏日博客 【进士】 @回复

    wp的气泡效果,好多人都在用呀。

  11. 前沿网
    前沿网 【书童】 @回复

    这个不错,回去研究一哈。

  12. 投资巴士
    投资巴士 【书童】 @回复

    真心很不错的功能!发现博主的112导航越来越棒了,内容和观感都上去了!!! [赞]

  13. 李盛奎博客
    李盛奎博客 【书童】 @回复

    已经用上了,很不错的一个小功能!

  14. 搭配博主
    搭配博主 【秀才】 @回复

    很实用啊,贴心。 [太开心] 谢谢分享。

  15. 小白seo博客
    小白seo博客 【秀才】 @回复

    生命不息折腾不止

  16. 99八十一
    99八十一 【进士】 @回复

    这个看个人需要了,喜欢的还是可以折腾下。

  17. 心动
    心动 【进士】 @回复

    这个好啊~准备加入到自己网站!

  18. 王光卫博客
    王光卫博客 【小白】 @回复

    试试看对用户体验有没有帮助

  19. 万正远洋
    万正远洋 【书童】 @回复

    不错,这个对一些“专业性”强的文章很有用处!多谢博主分享!

  20. 雅兮网
    雅兮网 【尚书】 @回复

    这功能不错,抽空集成到主题

  21. 橘子书
    橘子书 【丞相】 @回复

    小功能,大贴心。

  22. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    不错,对代码不是很熟悉的人相当有用

  23. 玉满斋
    玉满斋 【尚书】 @回复

    鸟哥的 Begin 主题下好像实现要稍微麻烦那么一点儿!

  24. 明月学习笔记Blog
    明月学习笔记Blog 【进士】 @回复

    好像 MarkDown 语法里也有这个东东的吧? [呵呵]

  25. 趣果网
    趣果网 【秀才】 @回复

    感谢分享,真心不错哦

  26. 明月登楼的博客
    明月登楼的博客 【王爷】 @回复

    我都是用插件的!就是具体使用场景有时候太少了!

  27. 日记
    日记 【小白】 @回复

    不错的功能。