拽立网 – Loper主题添加个性title提示

Loper主题添加个性title提示，偶尔给我发现特效提示框蛮不错的，简单来说就是气泡提示美化框样式，所以决定手动添加Loper主题个性title提示，拽立网，其实很简单的不是用复杂，只要用心修改一下颜色代码就行了，如果感觉很麻烦也可以使用Wordpress Tooltips插件，今天我把Loper主题添加个性title提示方法分享给大家，请看以下操作！

添加前的效果图！

1.登陆你的后台管理，选择【外观】-【编辑】-【loper: 样式表 (style.css)?】

选择：你喜欢效果的代码添加进去：【4种效果颜色自己改默认黑白】

1.第一种个性title提示效果图：

第一种个性title提示代码：

/* 主题个性title提示1 */
#tooltip{color:#FFFFFF;text-align:center;position:absolute;z-index:999;display:none;background:black;font-size:12px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;box-shadow:0 0 3px black;-moz-box-shadow:0 0 3px #000000;-webkit-box-shadow:0 0 3px black;padding:3px 8px;}

2.第二种个性title提示效果图：

第二种个性title提示代码：

/* 主题title提示样式2 */
#tooltip{background:#000000;color:#FFFFFF;text-align:center;margin-right:10px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #000000;border:1px dashed #FFFFFF;padding:3px 8px;font-size:12px;}

3.第三种个性title提示效果图：

第三种个性title提示代码：

/* 主题个性title提示3 */
#tooltip{background:#000;color:#FFFFFF;text-align:center;padding:6px 0;position:absolute;z-index:9999;display:none;border-radius:3px;box-shadow:0 0 3px #000;padding:3px 8px;font-size:12px;text-shadow:none;}
#tooltip:before{position: absolute;width: 0;height: 0;line-height: 0;border: 6px dashed #000;top: -6px;left:15px;border-bottom-style: solid;border-top: none;border-left-color: transparent;border-right-color: transparent;content:''}

4.第四种个性title提示效果图：

第四种个性title提示代码：

/* 主题个性title提示4 */
#tooltip{background:#000000;color:#FFFFFF;text-align:center;margin-right:10px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #000000;border:1px dashed #FFFFFF;padding:3px 8px;font-size:12px;}
#tooltip:before{position: absolute;width: 0;height: 0;line-height: 0;border: 6px dashed #000;top: -6px;left:15px;border-bottom-style: solid;border-top: none;border-left-color: transparent;border-right-color: transparent;content:''}

5.登陆你的FTP工具，选择【Loper主题】-【/scripts/】-【loperjs.js】

用【Notepad++】工具打开【loperjs.js】文件直接搜索以下代码：

$(".searchfade").fadeOut("slow");});

在上面代码后面添加下面全部代码：

function hooktooltip() {
$('*').each(function(i){if(this.title){var aTitle=this.title;$(this).mouseover(function(e){this.title='';$('body').append('<div id="tooltip">'+aTitle+'</div>')
;$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px',opacity:"0.8"
}).show(250)
}).mousemove(function(e) {
$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px'
})}).mouseout(function() {
this.title=aTitle;$('#tooltip').remove()
}).mousemove(function(e) {
$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px'
})})}});}
hooktooltip();

不懂添加代码，那就下载我分享的【loperjs.js】文件！然后替换！

链接：https://pan.baidu.com/s/1jS_2hRM86UJGTKXm01ZZxQ 密码：0nz3

提示：CSS里面颜色代码随便修改你喜欢的，各有所爱！

提示：Loper主题专用代码，添加带其他主题自己研究，请先备份好文件！