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
Không có nhận xét nào:
Đăng nhận xét