Xin chào mừng tất cả các bạn đã đến với blog của mình.Hôm nay mình xin chia sẻ đến các bạn cách để tạo tooltips đẹp cho blogspot
Demo
Các bước thực hiện:))
Bước 1:Thêm đoạn js bên dưới vào blog của bạn
! function (_0x41afx1) {
_0x41afx1.tooltipsy = function (_0x41afx2, _0x41afx3) {
this.options = _0x41afx3, this["$el"] = _0x41afx1(_0x41afx2), this.title = this["$el"].attr("title") || "", this["$el"].attr("title", ""), this.random = parseInt(1e4 * Math.random()), this.ready = !1, this.shown = !1, this.width = 0, this.height = 0, this.delaytimer = null, this["$el"].data("tooltipsy", this), this.init()
}, _0x41afx1.tooltipsy.prototype = {
init: function () {
var _0x41afx2, _0x41afx3 = this,
_0x41afx4 = _0x41afx3["$el"],
_0x41afx5 = _0x41afx4[0];
_0x41afx3.settings = _0x41afx2 = _0x41afx1.extend({}, _0x41afx3.defaults, _0x41afx3.options), _0x41afx2.delay = +_0x41afx2.delay, "function" == typeof _0x41afx2.content && _0x41afx3.readify(), _0x41afx2.showEvent === _0x41afx2.hideEvent && "click" === _0x41afx2.showEvent ? _0x41afx4.toggle(function (_0x41afx1) {
"click" === _0x41afx2.showEvent && "A" == _0x41afx5.tagName && _0x41afx1.preventDefault(), _0x41afx2.delay > 0 ? _0x41afx3.delaytimer = window.setTimeout(function () {
_0x41afx3.show(_0x41afx1)
}, _0x41afx2.delay) : _0x41afx3.show(_0x41afx1)
}, function (_0x41afx1) {
"click" === _0x41afx2.showEvent && "A" == _0x41afx5.tagName && _0x41afx1.preventDefault(), window.clearTimeout(_0x41afx3.delaytimer), _0x41afx3.delaytimer = null, _0x41afx3.hide(_0x41afx1)
}) : _0x41afx4.bind(_0x41afx2.showEvent, function (_0x41afx1) {
"click" === _0x41afx2.showEvent && "A" == _0x41afx5.tagName && _0x41afx1.preventDefault(), _0x41afx3.delaytimer = window.setTimeout(function () {
_0x41afx3.show(_0x41afx1)
}, _0x41afx2.delay || 0)
}).bind(_0x41afx2.hideEvent, function (_0x41afx1) {
"click" === _0x41afx2.showEvent && "A" == _0x41afx5.tagName && _0x41afx1.preventDefault(), window.clearTimeout(_0x41afx3.delaytimer), _0x41afx3.delaytimer = null, _0x41afx3.hide(_0x41afx1)
})
},
show: function (_0x41afx2) {
!1 === this.ready && this.readify();
var _0x41afx3 = this,
_0x41afx4 = _0x41afx3.settings,
_0x41afx5 = _0x41afx3["$tipsy"],
_0x41afx6 = _0x41afx3["$el"],
_0x41afx7 = _0x41afx6[0],
_0x41afx8 = _0x41afx3.offset(_0x41afx7);
if (!1 === _0x41afx3.shown && (function (_0x41afx1) {
var _0x41afx2, _0x41afx3 = 0;
for (_0x41afx2 in _0x41afx1) {
_0x41afx1.hasOwnProperty(_0x41afx2) && _0x41afx3++
};
return _0x41afx3
}(_0x41afx4.css) > 0 && _0x41afx3["$tip"].css(_0x41afx4.css), _0x41afx3.width = _0x41afx5.outerWidth(), _0x41afx3.height = _0x41afx5.outerHeight()), "cursor" === _0x41afx4.alignTo && _0x41afx2) {
if ((_0x41afx9 = [_0x41afx2.clientX + _0x41afx4.offset[0], _0x41afx2.clientY + _0x41afx4.offset[1]])[0] + _0x41afx3.width > _0x41afx1(window).width()) {
_0x41afx9[1], _0x41afx9[0]
} else {
_0x41afx9[1], _0x41afx9[0]
}
} else {
var _0x41afx9 = [_0x41afx4.offset[0] < 0 ? _0x41afx8.left - Math.abs(_0x41afx4.offset[0]) - _0x41afx3.width : 0 === _0x41afx4.offset[0] ? _0x41afx8.left - (_0x41afx3.width - _0x41afx6.outerWidth()) / 2 : _0x41afx8.left + _0x41afx6.outerWidth() + _0x41afx4.offset[0], _0x41afx4.offset[1] < 0 ? _0x41afx8.top - Math.abs(_0x41afx4.offset[1]) - _0x41afx3.height : 0 === _0x41afx4.offset[1] ? _0x41afx8.top - (_0x41afx3.height - _0x41afx3["$el"].outerHeight()) / 2 : _0x41afx8.top + _0x41afx3["$el"].outerHeight() + _0x41afx4.offset[1]]
};
_0x41afx5.css({
top: _0x41afx9[1] + "px",
left: _0x41afx9[0] + "px"
}), _0x41afx3.settings.show(_0x41afx2, _0x41afx5.stop(!0, !0))
},
hide: function (_0x41afx1) {
var _0x41afx2 = this;
!1 !== _0x41afx2.ready && (_0x41afx1 && _0x41afx1.relatedTarget === _0x41afx2["$tip"][0] ? _0x41afx2["$tip"].bind("mouseleave", function (_0x41afx1) {
_0x41afx1.relatedTarget !== _0x41afx2["$el"][0] && _0x41afx2.settings.hide(_0x41afx1, _0x41afx2["$tipsy"].stop(!0, !0))
}) : _0x41afx2.settings.hide(_0x41afx1, _0x41afx2["$tipsy"].stop(!0, !0)))
},
readify: function () {
this.ready = !0, this["$tipsy"] = _0x41afx1("<div id=\"tooltipsy" + this.random + "\" style=\"position:fixed;z-index:2147483647;display:none\">").appendTo("body"), this["$tip"] = _0x41afx1("<div class=\"" + this.settings.className + "\">").appendTo(this.$tipsy), this["$tip"].data("rootel", this.$el);
var _0x41afx2 = this["$el"],
_0x41afx3 = this["$tip"];
this["$tip"].html("" != this.settings.content ? "string" == typeof this.settings.content ? this.settings.content : this.settings.content(_0x41afx2, _0x41afx3) : this.title)
},
offset: function (_0x41afx1) {
return this["$el"][0].getBoundingClientRect()
},
destroy: function () {
this["$tipsy"] && (this["$tipsy"].remove(), _0x41afx1.removeData(this.$el, "tooltipsy"))
},
update: function () {
this.title = this["$el"].attr("title"), this["$tipsy"] && this["$tipsy"].remove(), this.ready = !1
},
defaults: {
alignTo: "element",
offset: [0, -1],
content: "",
show: function (_0x41afx1, _0x41afx2) {
_0x41afx2.fadeIn()
},
hide: function (_0x41afx1, _0x41afx2) {
_0x41afx2.fadeOut()
},
css: {},
className: "tooltipsy",
delay: 0,
showEvent: "mouseenter",
hideEvent: "mouseleave"
}
}, _0x41afx1.fn.tooltipsy = function (_0x41afx2) {
return this.each(function () {
new _0x41afx1.tooltipsy(this, _0x41afx2)
})
}
}(jQuery),
function (_0x41afx1) {
_0x41afx1.tooltipsy2 = function (_0x41afx2, _0x41afx3) {
this.options = _0x41afx3, this["$el"] = _0x41afx1(_0x41afx2), this.title = this["$el"].attr("title") || "", this["$el"].attr("title", ""), this.random = parseInt(1e4 * Math.random()), this.ready = !1, this.shown = !1, this.width = 0, this.height = 0, this.delaytimer = null, this["$el"].data("tooltipsy2", this), this.init()
}, _0x41afx1.tooltipsy2.prototype = {
init: function () {
var _0x41afx2, _0x41afx3 = this,
_0x41afx4 = _0x41afx3["$el"],
_0x41afx5 = _0x41afx4[0];
_0x41afx3.settings = _0x41afx2 = _0x41afx1.extend({}, _0x41afx3.defaults, _0x41afx3.options), _0x41afx2.delay = +_0x41afx2.delay, "function" == typeof _0x41afx2.content && _0x41afx3.readify(), _0x41afx2.showEvent === _0x41afx2.hideEvent && "click" === _0x41afx2.showEvent ? _0x41afx4.toggle(function (_0x41afx1) {
"click" === _0x41afx2.showEvent && "A" == _0x41afx5.tagName && _0x41afx1.preventDefault(), _0x41afx2.delay > 0 ? _0x41afx3.delaytimer = window.setTimeout(function () {
_0x41afx3.show(_0x41afx1)
}, _0x41afx2.delay) : _0x41afx3.show(_0x41afx1)
}, function (_0x41afx1) {
"click" === _0x41afx2.showEvent && "A" == _0x41afx5.tagName && _0x41afx1.preventDefault(), window.clearTimeout(_0x41afx3.delaytimer), _0x41afx3.delaytimer = null, _0x41afx3.hide(_0x41afx1)
}) : _0x41afx4.bind(_0x41afx2.showEvent, function (_0x41afx1) {
"click" === _0x41afx2.showEvent && "A" == _0x41afx5.tagName && _0x41afx1.preventDefault(), _0x41afx3.delaytimer = window.setTimeout(function () {
_0x41afx3.show(_0x41afx1)
}, _0x41afx2.delay || 0)
}).bind(_0x41afx2.hideEvent, function (_0x41afx1) {
"click" === _0x41afx2.showEvent && "A" == _0x41afx5.tagName && _0x41afx1.preventDefault(), window.clearTimeout(_0x41afx3.delaytimer), _0x41afx3.delaytimer = null, _0x41afx3.hide(_0x41afx1)
})
},
show: function (_0x41afx2) {
!1 === this.ready && this.readify();
var _0x41afx3 = this,
_0x41afx4 = _0x41afx3.settings,
_0x41afx5 = _0x41afx3["$tipsy"],
_0x41afx6 = _0x41afx3["$el"],
_0x41afx7 = _0x41afx6[0],
_0x41afx8 = _0x41afx3.offset(_0x41afx7);
if (!1 === _0x41afx3.shown && (function (_0x41afx1) {
var _0x41afx2, _0x41afx3 = 0;
for (_0x41afx2 in _0x41afx1) {
_0x41afx1.hasOwnProperty(_0x41afx2) && _0x41afx3++
};
return _0x41afx3
}(_0x41afx4.css) > 0 && _0x41afx3["$tip"].css(_0x41afx4.css), _0x41afx3.width = _0x41afx5.outerWidth(), _0x41afx3.height = _0x41afx5.outerHeight()), "cursor" === _0x41afx4.alignTo && _0x41afx2) {
if ((_0x41afx9 = [_0x41afx2.clientX + _0x41afx4.offset[0], _0x41afx2.clientY + _0x41afx4.offset[1]])[0] + _0x41afx3.width > _0x41afx1(window).width()) {
_0x41afx9[1], _0x41afx9[0]
} else {
_0x41afx9[1], _0x41afx9[0]
}
} else {
var _0x41afx9 = [_0x41afx4.offset[0] < 0 ? _0x41afx8.left - Math.abs(_0x41afx4.offset[0]) - _0x41afx3.width : 0 === _0x41afx4.offset[0] ? _0x41afx8.left - (_0x41afx3.width - _0x41afx6.outerWidth()) / 2 : _0x41afx8.left + _0x41afx6.outerWidth() + _0x41afx4.offset[0], _0x41afx4.offset[1] < 0 ? _0x41afx8.top - Math.abs(_0x41afx4.offset[1]) - _0x41afx3.height : 0 === _0x41afx4.offset[1] ? _0x41afx8.top - (_0x41afx3.height - _0x41afx3["$el"].outerHeight()) / 2 : _0x41afx8.top + _0x41afx3["$el"].outerHeight() + _0x41afx4.offset[1]]
};
_0x41afx5.css({
top: _0x41afx9[1] + "px",
left: _0x41afx9[0] + "px"
}), _0x41afx3.settings.show(_0x41afx2, _0x41afx5.stop(!0, !0))
},
hide: function (_0x41afx1) {
var _0x41afx2 = this;
!1 !== _0x41afx2.ready && (_0x41afx1 && _0x41afx1.relatedTarget === _0x41afx2["$tip"][0] ? _0x41afx2["$tip"].bind("mouseleave", function (_0x41afx1) {
_0x41afx1.relatedTarget !== _0x41afx2["$el"][0] && _0x41afx2.settings.hide(_0x41afx1, _0x41afx2["$tipsy"].stop(!0, !0))
}) : _0x41afx2.settings.hide(_0x41afx1, _0x41afx2["$tipsy"].stop(!0, !0)))
},
readify: function () {
this.ready = !0, this["$tipsy"] = _0x41afx1("<div id=\"tooltipsy2" + this.random + "\" style=\"position:fixed;z-index:2147483647;display:none\">").appendTo("body"), this["$tip"] = _0x41afx1("<div class=\"" + this.settings.className + "\">").appendTo(this.$tipsy), this["$tip"].data("rootel", this.$el);
var _0x41afx2 = this["$el"],
_0x41afx3 = this["$tip"];
this["$tip"].html("" != this.settings.content ? "string" == typeof this.settings.content ? this.settings.content : this.settings.content(_0x41afx2, _0x41afx3) : this.title)
},
offset: function (_0x41afx1) {
return this["$el"][0].getBoundingClientRect()
},
destroy: function () {
this["$tipsy"] && (this["$tipsy"].remove(), _0x41afx1.removeData(this.$el, "tooltipsy2"))
},
update: function () {
this.title = this["$el"].attr("title"), this["$tipsy"] && this["$tipsy"].remove(), this.ready = !1
},
defaults: {
alignTo: "element",
offset: [0, -1],
content: "",
show: function (_0x41afx1, _0x41afx2) {
_0x41afx2.fadeIn()
},
hide: function (_0x41afx1, _0x41afx2) {
_0x41afx2.fadeOut()
},
css: {},
className: "tooltipsy2",
delay: 0,
showEvent: "mouseenter",
hideEvent: "mouseleave"
}
}, _0x41afx1.fn.tooltipsy2 = function (_0x41afx2) {
return this.each(function () {
new _0x41afx1.tooltipsy2(this, _0x41afx2)
})
}
}(jQuery);
$(".bsw-tl").tooltipsy({
offset: [0, 10],
show: function (_0x41afx2, _0x41afx1) {
_0x41afx1.css({
left: parseInt(_0x41afx1[0].style.left.replace(/[a-z]/g, "")),
display: "block"
}).animate({
left: parseInt(_0x41afx1[0].style.left.replace(/[a-z]/g, ""))
}, 0)
},
hide: function (_0x41afx2, _0x41afx1) {
_0x41afx1.hide()
}
}), $(".bsw-tls").tooltipsy2({
offset: [10, 0],
show: function (_0x41afx2, _0x41afx1) {
_0x41afx1.css({
left: parseInt(_0x41afx1[0].style.left.replace(/[a-z]/g, "")),
display: "block"
}).animate({
left: parseInt(_0x41afx1[0].style.left.replace(/[a-z]/g, ""))
}, 0)
},
hide: function (_0x41afx2, _0x41afx1) {
_0x41afx1.hide()
}
})Bước 2:Thêm đoạn css bên dưới vào trong thẻ ]]></b:skin>
.tooltipsy,.tooltipsy2{ padding: 6px 12px; max-width: 300px; color: #fff; background-color: #333; box-shadow: 0 0 20px rgba(0,0,0,.1); border-radius: 4px; font-size:14px; line-height:1.35; position:relative; pointer-events: none; text-align: center }
.tooltipsy:before {
content: '';
border: 8px solid #333;
border-top: 6px solid transparent;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
top: -13px;
position: absolute;
left: 50%;
z-index: 1;
transform: translate(-50%,0);
}
.tooltipsy2:before{
content: '';
border: 6px solid transparent;
border-top: 6px solid transparent;
border-left: 6px solid transparent;
border-right: 12px solid #333;
top: 50%;
position: absolute;
left: -14px;
z-index: 10;
transform: translate(0,-50%);
}Vậy là đã hoàn thành rồi =))
Nếu muốn sử dụng bạn chỉ cần thêm class bsw-tl hoặc bsw-tls vào đó
#view-code:bsw