分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » 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简易集成Markdown教程

    WordPress简易集成Markdown教程

    今天首先在群里面看到一个用户询问是否有方法将Markdown集成到主题里面去,后来我一想,这个所谓的Markdown确实是很多人提到 ...

    点击查看
  • WordPress制作简易年度总结页面

    WordPress制作简易年度总结页面

    今天早些时候已经制作一个类似112博客导航的页面,具体可以详见:

    点击查看
  • WordPress通过短代码显示指定文章内容

    WordPress通过短代码显示指定文章内容

    今天在一个WordPress交流群里面看到一个群友问一个问题,我个人方面也是很感兴趣,这个问题就是如何通过“新建文章栏输入链接 ...

    点击查看
  • 禁用WordPress 4.7版本的PDF预览功能

    禁用WordPress 4.7版本的PDF预览功能

    之前的文章我们也介绍了,关于WordPress 4.7版本中,新增了一个预览PDF的功能,详见:

    点击查看
  • WordPress获取文章的第一张图片并且显示

    WordPress获取文章的第一张图片并且显示

    关于这类的文章我们已经介绍过两种方法了,两种方法都不一样,但是适合自己的才是最好的,虽然今天我要介绍的方法可能不适合 ...

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