分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress站点Tooltip美化教程
+

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 评论中嵌入图片

    今天在知更鸟博客看到了这篇文章,虽然文章本身的原理很简单,但是通过这个原理我相信可以了解到信息或者说可以达到举一反三 ...

    点击查看
  • WordPress搜索只显示标题中含有关键字的文章

    WordPress搜索只显示标题中含有关键字的文章

    今天在知更鸟博客上面看到了这篇文章,整体来说,这个功能在某些方面还是比较有用的,如果说通过标题中的关键字来寻找文章的 ...

    点击查看
  • 如何给WordPress站点添加wow.js效果

    如何给WordPress站点添加wow.js效果

    今天折腾了以下这个东西,为什么会折腾这个东西呢,因为之前经常逛知更鸟博客,后来一次更新之后,发现知更鸟博客多了一种加 ...

    点击查看
  • 如何在WordPress评论中显示更多HTML标签

    如何在WordPress评论中显示更多HTML标签

    我见过很多站点,都可以在评论里面添加各种标签,什么自己加粗,然后添加图片,添加链接等等,当时我个人觉得可能并不适合我 ...

    点击查看
  • WordPress显示一年前当天的文章

    WordPress显示一年前当天的文章

    最开始看到这个功能是在112博客,那个时候看到这个功能的第一感觉可能就是觉得,这个功能不是很实用,可能会增加SQL语句的查 ...

    点击查看
  • 给你的WordPress站点添加一个打印按钮

    给你的WordPress站点添加一个打印按钮

    这个功能很久之前就已经在知更鸟博客上面看到了,但是一直没有想过是什么原理,但是今天无意间发现了一个方法,目前觉得还是 ...

    点击查看
  • WordPress显示一周热评

    WordPress显示一周热评

    WordPress站点如何显示一周热评,我相信还是有很多人都想要知道的,那么这里就简单的说说实现方法了。

    点击查看
  • WordPress 限定显示评论者链接的输出

    WordPress 限定显示评论者链接的输出

    最近从bigfa的相关站点看到了这个更新内容,我个人觉得还是很有用的,对于一些广告用户还是有一定的作用的,毕竟有些时候, ...

    点击查看
  • WordPress文章段落间插入广告

    WordPress文章段落间插入广告

    很久之前就已经在留意这个功能了,但是一直没有找到相关的解决办法,今天我算是找到了这个相关代码。使用这个功能对于我们宣 ...

    点击查看
  • 最轻便的复制页面内容到剪切板的JS:clipboard.js

    最轻便的复制页面内容到剪切板的JS:clipboard.js

    今天早些时候在水煮鱼博客看到了这篇文章,我一开始是想要用到代码方面的,毕竟代码很多时候都是直接复制编辑的,但是后来想 ...

    点击查看
  • WordPress前台显示站点有多少注册用户

    WordPress前台显示站点有多少注册用户

    虽然我的站点目前已经关闭了注册,所有已经注册过的用户已经清理完毕了,这里说声抱歉。那么今天这个文章就是给大家一个方法 ...

    点击查看
  • WordPress添加一个底部漂浮栏

    WordPress添加一个底部漂浮栏

    站点底部添加一个通知栏的作用是起到一个通知或者说增加PV的作用,但是很多时候我们都知道,这种通知可能被人觉得很反感,但 ...

    点击查看

  目前有 10 条评论 其中:访客: 5 条, 博主: 5 条

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