WordPress 实现 tooltip 内容提示信息效果

4 Comments

Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验。

实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示。实现方法也非常简单。

html结构

<a class="css-tooltip" href="http://fatesinger.com/73887" data-tooltip="137 likes with 3.43k reads">WordPress Theme Pivot</a>

可以看到关键有2点,意识有css-tooltip标签,二是用data-tooltip保存提示信息。

css代码

.css-tooltip{position:relative}
.css-tooltip:after{background-color:rgba(0,0,0,0.8);border-radius:3px;bottom:30px;color:#fff;content:attr(data-tooltip);display:none;font-size:12px;left:50%;line-height:1.3;padding:5px;position:absolute;text-align:center;width:160px;margin-left:-85px}
.css-tooltip:before{content:"";border:4px transparent solid;border-top-color:rgba(0,0,0,0.8);position:absolute;bottom:22px;left:50%;display:none;margin-left:-4px}
.css-tooltip:hover:after,.css-tooltip:hover:before{display:block}

PS

也可以使用.xxxx[data-tooltip]这种选择器。

尽量不要和title标签同时使用,会比较不美观。

【纯CSS 实现tooltip 内容提示信息效果-大发】 http://fatesinger.com/74304


附上另一种实现方法,来自 kn007

$('*').each(function(i){
if(this.title){
var aTitle=this.title;
$(this).mouseover(function(e){
this.title='';
$('body').append('<div style="color: #5692BC;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 #000;-webkit-box-shadow: 0 0 3px black;padding: 3px 8px;" 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'
})
})
}
});

还有一种类似的:http://www.ctolib.com/topics-76878.html

/*
调用示例:
$(document).ready(function(){
$('.quicktip').quberTip({
speed:200
});
});
<a href='' class='quicktip' title='Information about this link'>desktop publishing</a>
*/
jQuery.fn.quberTip = function (options) {
var defaults = {
speed: 500,
xOffset: 10,
yOffset: 10
};
var options = $.extend(defaults, options);
return this.each(function () {
var $this = jQuery(this);
if ($this.attr('title') != undefined) {
//Pass the title to a variable and then remove it from DOM
if ($this.attr('title') != '') {
var tipTitle = ($this.attr('title'));
} else {
var tipTitle = 'QuberTip';
}
//Remove title attribute
$this.removeAttr('title');
$(this).hover(function (e) {
// $(this).css('cursor', 'pointer');
$("body").append("<div id='tooltip'>" + tipTitle + "</div>");
$("#tooltip").css({ "position": "absolute",
"z-index": "9999",
"background": "#D3DDF5",
"background-image": "url(../../Quber_Image/Quber_Common/Quber_TB_TitltBG.png)",
"padding": "5px",
"opacity": "0.9",
"border": "1px solid #A3C0E8",
"-moz-border-radius": "3px",
"border-radius": "3px",
"-webkit-border-radius": "3px",
"font-weight": "normal",
"font-size": "12px",
"display": "none"
});
$("#tooltip")
.css("top", (e.pageY + defaults.xOffset) + "px")
.css("left", (e.pageX + defaults.yOffset) + "px")
.fadeIn(options.speed);
}, function () {
//Remove the tooltip from the DOM
$("#tooltip").remove();
});
$(this).mousemove(function (e) {
$("#tooltip")
.css("top", (e.pageY + defaults.xOffset) + "px")
.css("left", (e.pageX + defaults.yOffset) + "px");
});
}
});
};
——最近更新:2017年2月23日
支付宝扫码打赏微信打赏

如果文章对您有帮助,欢迎移至上方按钮打赏老杨

声明: 除非注明,常阳时光文章均为原创,转载请以链接形式标明本文地址
本文地址:https://cyhour.com/205/
Tags: 

Comments:4

  1. 测试下

    2015.08.08 13:20 # 回复
    1楼
    • @张戈
      可以了,原来原插件代码这里还有个判断,去掉!is_user_logged_in()就可以了。

      function myQaptcha_wp_footer() {
      if (is_singular() && !is_user_logged_in()) {
      2015.08.08 14:29 # 回复

发表留言