分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
 您目前所在位置: 站点首页 » WordPress » WordPress 代码 » WordPress站点Tooltip美化教程
  • +
  • 16
  • WordPress站点Tooltip美化教程

    已经很久没有发布WordPress相关的代码了,这段时间似乎已经放弃折腾站点的东西了。以前总是转载别的人的代码,确实是就是这样的,因为自己能力有限,所以根本不会自己写,只会依葫芦画瓢,但是不可能适用于所有站点。

    今天给大家介绍一个美化Tooltip的方法,代码方面依然来自网络,我个人觉得这个是目前比较好的美化教程了,使用起来也是相对比较简单的。代码方面包括两段代码,一段JS代码,一段CSS代码:

    JS代码

    <script>jQuery(document).ready(function($) {
    var sweetTitles = {
    x: 10,
    y: 20,
    tipElements: "a,span,img,div ",
    noTitle: false,
    init: function() {
    var noTitle = this.noTitle;
    $(this.tipElements).each(function() {
    $(this).mouseover(function(e) {
    if (noTitle) {
    isTitle = true;
    } else {
    isTitle = $.trim(this.title) != '';
    }
    if (isTitle) {
    this.myTitle = this.title;
    this.title = "";
    var tooltip = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>" + this.myTitle + "</div></div>";
    $('body').append(tooltip);
    $('.tooltip').css({
    "top": (e.pageY + 20) + "px",
    "left": (e.pageX - 20) + "px"
    }).show('fast');
    }
    }).mouseout(function() {
    if (this.myTitle != null) {
    this.title = this.myTitle;
    $('.tooltip').remove();
    }
    }).mousemove(function(e) {
    $('.tooltip').css({
    "top": (e.pageY + 20) + "px",
    "left": (e.pageX - 20) + "px"
    });
    });
    });
    }
    };
    $(function() {
    sweetTitles.init();
    });
    });</script>
    

    代码方面加入站点主要的JS文件中,如果添加之后没有效果,那么尝试将script标签删除。

    CSS代码

    .tooltip {
    font-size: 12px;
    font-family: \5b8b\4f53;
    line-height: 1.5;
    position: absolute;
    padding: 5px;
    z-index: 100003;
    opacity: .8
    }
    .tipsy-arrow {
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    border: 6px dashed #FFA500;
    top: 0;
    left: 20%;
    margin-left: -5px;
    border-bottom-style: solid;
    border-top: 0;
    border-left-color: transparent;
    border-right-color: transparent
    }
    .tipsy-arrow-n {
    border-bottom-color: #FFA500;
    }
    .tipsy-inner {
    background-color: #FFA500;
    color: #fff;
    max-width: 200px;
    padding: 5px 8px 4px 8px;
    text-align: center;
    border-radius: 3px
    }
    

    CSS代码放在站点主要的CSS文件中即可。

    如果你上面都添加完毕了,那么现实效果方面应该是下面的情况:
    WordPress站点Tooltip美化教程-BanYuner

    如果添加过程中遇到了上面问题,欢迎留言告知。

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

    WordPress站点Tooltip美化教程

    支付宝(点击图片切换)

    扫码,支持我

    WordPress站点Tooltip美化教程

    微信(点击图片切换)

    扫码,手机看

    WordPress站点Tooltip美化教程
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    相关推荐

    • WordPress 分类描述添加可视化编辑模式

      WordPress 分类描述添加可视化编辑模式

      可视化编辑模式一直是很多人喜欢使用的,但是我个人方面还是喜欢传统的 html 模式,不是别的,主要是自己写的东西通过代码出现的就是自己的,而...

      点击查看
    • 6 款 WordPress 缓存插件对比测试

      6 款 WordPress 缓存插件对比测试

      缓存插件我相信每个站点几乎都是在使用的,插件的原理并不是能提高带宽也不是说能提高页面加载速度等等,仅仅是为了降低服务器的压力,当人群数量大量...

      点击查看
    • WordPress 获取分类第一篇文章第一张图片地址

      WordPress 获取分类第一篇文章第一张图片地址

      这个功能我不知道网络上面有没有相关教程,至少我是没有看到的,所以这里还是简单的说一下,可能其中有不少问题,也可能是我的方法太过复杂,但是还是...

      点击查看
    WordPress站点Tooltip美化教程
    0 + 7 =
    1. 5楼
      bandwagonhost
      最后评论时间:2016/08/29 16:30
      来自天朝的朋友 谷歌浏览器 Windows 10 江苏省南通市 电信
      这个还是蛮好的,细节体验不错。PS:博主这个主题是DUX吗?好像功能有好多细节不错,比如评论星级评论。
      bandwagonhost 10个月前 (08-29)回复
      • 帅气小琦琦
        最后评论时间:2017/06/24 23:20
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通
        @bandwagonhost 确实是的,是dux的主题,我自己修改了比较多的方面,浏览更多你也会发现更多
        帅气小琦琦    3小时前回复
    2. 4楼
      闲鱼
      最后评论时间:2017/06/21 19:10
      来自天朝的朋友 QQ浏览器 Windows 7 湖南省长沙市 电信
      之前也是准备折腾这个的,后来没弄,懒 :smile:
      闲鱼 3天前回复
      • 帅气小琦琦
        最后评论时间:2017/06/24 23:20
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信
        @闲鱼 其实很快的 也很简单
        帅气小琦琦    3小时前回复
    3. 3楼
      陌小雨博客
      最后评论时间:2017/03/12 12:38
      来自天朝的朋友 火狐浏览器 Windows 10 江西省 联通
      这个应该是有title的地方都会替换显示吧 :wink:
      陌小雨博客 3个月前 (03-12)回复
    4. 2楼
      楚书业
      最后评论时间:2016/10/01 10:16
      来自天朝的朋友 QQ浏览器 Windows 10 福建省漳州市 电信
      原来这个东西就叫tooltip,我还真不知道。备着!
      楚书业 9个月前 (10-01)回复
    5. 1楼
      啪啪哒IT
      最后评论时间:2017/04/20 18:37
      来自天朝的朋友 谷歌浏览器 Windows 7 广东省中山市 联通
      博客你好,我用的是xiu主题,但是添加了代码之后还是无法显示出那种特效js和css的都试过了 :???:
      啪啪哒IT 2个月前 (04-20)回复
      • 帅气小琦琦
        最后评论时间:2017/06/24 23:20
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通
        @啪啪哒IT 首先确定代码方面是否添加正确位置 其次 如果JS没有生效 考虑吧script标签删除
        帅气小琦琦    3小时前回复