dio-v
10/10/2013 - 5:39 AM

Tooltip http://jquerytools.org/demos/tooltip/index.html

$('.info').tooltip().dynamic();

  /*!
     * jQuery Tools v1.2.7 - The missing UI library for the Web
     * 
     * tooltip/tooltip.js
     * tooltip/tooltip.dynamic.js
     * 
     * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
     * 
     * http://jquerytools.org/demos/tooltip/index.html
     * 
     */
    (function (a) { a.tools = a.tools || { version: "v1.2.7" }, a.tools.tooltip = { conf: { effect: "toggle", fadeOutSpeed: "fast", predelay: 0, delay: 30, opacity: 1, tip: 0, fadeIE: !1, position: ["top", "center"], offset: [0, 0], relative: !1, cancelDefault: !0, events: { def: "mouseenter,mouseleave", input: "focus,blur", widget: "focus mouseenter,blur mouseleave", tooltip: "mouseenter,mouseleave" }, layout: "<div/>", tipClass: "tooltip" }, addEffect: function (a, c, d) { b[a] = [c, d] } }; var b = { toggle: [function (a) { var b = this.getConf(), c = this.getTip(), d = b.opacity; d < 1 && c.css({ opacity: d }), c.show(), a.call() }, function (a) { this.getTip().hide(), a.call() }], fade: [function (b) { var c = this.getConf(); !a.browser.msie || c.fadeIE ? this.getTip().fadeTo(c.fadeInSpeed, c.opacity, b) : (this.getTip().show(), b()) }, function (b) { var c = this.getConf(); !a.browser.msie || c.fadeIE ? this.getTip().fadeOut(c.fadeOutSpeed, b) : (this.getTip().hide(), b()) }] }; function c(b, c, d) { var e = d.relative ? b.position().top : b.offset().top, f = d.relative ? b.position().left : b.offset().left, g = d.position[0]; e -= c.outerHeight() - d.offset[0], f += b.outerWidth() + d.offset[1], /iPad/i.test(navigator.userAgent) && (e -= a(window).scrollTop()); var h = c.outerHeight() + b.outerHeight(); g == "center" && (e += h / 2), g == "bottom" && (e += h), g = d.position[1]; var i = c.outerWidth() + b.outerWidth(); g == "center" && (f -= i / 2), g == "left" && (f -= i); return { top: e, left: f } } function d(d, e) { var f = this, g = d.add(f), h, i = 0, j = 0, k = d.attr("title"), l = d.attr("data-tooltip"), m = b[e.effect], n, o = d.is(":input"), p = o && d.is(":checkbox, :radio, select, :button, :submit"), q = d.attr("type"), r = e.events[q] || e.events[o ? p ? "widget" : "input" : "def"]; if (!m) throw "Nonexistent effect \"" + e.effect + "\""; r = r.split(/,\s*/); if (r.length != 2) throw "Tooltip: bad events configuration for " + q; d.on(r[0], function (a) { clearTimeout(i), e.predelay ? j = setTimeout(function () { f.show(a) }, e.predelay) : f.show(a) }).on(r[1], function (a) { clearTimeout(j), e.delay ? i = setTimeout(function () { f.hide(a) }, e.delay) : f.hide(a) }), k && e.cancelDefault && (d.removeAttr("title"), d.data("title", k)), a.extend(f, { show: function (b) { if (!h) { l ? h = a(l) : e.tip ? h = a(e.tip).eq(0) : k ? h = a(e.layout).addClass(e.tipClass).appendTo(document.body).hide().append(k) : (h = d.next(), h.length || (h = d.parent().next())); if (!h.length) throw "Cannot find tooltip for " + d } if (f.isShown()) return f; h.stop(!0, !0); var o = c(d, h, e); e.tip && h.html(d.data("title")), b = a.Event(), b.type = "onBeforeShow", g.trigger(b, [o]); if (b.isDefaultPrevented()) return f; o = c(d, h, e), h.css({ position: "absolute", top: o.top, left: o.left }), n = !0, m[0].call(f, function () { b.type = "onShow", n = "full", g.trigger(b) }); var p = e.events.tooltip.split(/,\s*/); h.data("__set") || (h.off(p[0]).on(p[0], function () { clearTimeout(i), clearTimeout(j) }), p[1] && !d.is("input:not(:checkbox, :radio), textarea") && h.off(p[1]).on(p[1], function (a) { a.relatedTarget != d[0] && d.trigger(r[1].split(" ")[0]) }), e.tip || h.data("__set", !0)); return f }, hide: function (c) { if (!h || !f.isShown()) return f; c = a.Event(), c.type = "onBeforeHide", g.trigger(c); if (!c.isDefaultPrevented()) { n = !1, b[e.effect][1].call(f, function () { c.type = "onHide", g.trigger(c) }); return f } }, isShown: function (a) { return a ? n == "full" : n }, getConf: function () { return e }, getTip: function () { return h }, getTrigger: function () { return d } }), a.each("onHide,onBeforeShow,onShow,onBeforeHide".split(","), function (b, c) { a.isFunction(e[c]) && a(f).on(c, e[c]), f[c] = function (b) { b && a(f).on(c, b); return f } }) } a.fn.tooltip = function (b) { var c = this.data("tooltip"); if (c) return c; b = a.extend(!0, {}, a.tools.tooltip.conf, b), typeof b.position == "string" && (b.position = b.position.split(/,?\s/)), this.each(function () { c = new d(a(this), b), a(this).data("tooltip", c) }); return b.api ? c : this } })(jQuery);
    (function (a) { var b = a.tools.tooltip; b.dynamic = { conf: { classNames: "top right bottom left" } }; function c(b) { var c = a(window), d = c.width() + c.scrollLeft(), e = c.height() + c.scrollTop(); return [b.offset().top <= c.scrollTop(), d <= b.offset().left + b.width(), e <= b.offset().top + b.height(), c.scrollLeft() >= b.offset().left] } function d(a) { var b = a.length; while (b--) if (a[b]) return !1; return !0 } a.fn.dynamic = function (e) { typeof e == "number" && (e = { speed: e }), e = a.extend({}, b.dynamic.conf, e); var f = a.extend(!0, {}, e), g = e.classNames.split(/\s/), h; this.each(function () { var b = a(this).tooltip().onBeforeShow(function (b, e) { var i = this.getTip(), j = this.getConf(); h || (h = [j.position[0], j.position[1], j.offset[0], j.offset[1], a.extend({}, j)]), a.extend(j, h[4]), j.position = [h[0], h[1]], j.offset = [h[2], h[3]], i.css({ visibility: "hidden", position: "absolute", top: e.top, left: e.left }).show(); var k = a.extend(!0, {}, f), l = c(i); if (!d(l)) { l[2] && (a.extend(j, k.top), j.position[0] = "top", i.addClass(g[0])), l[3] && (a.extend(j, k.right), j.position[1] = "right", i.addClass(g[1])), l[0] && (a.extend(j, k.bottom), j.position[0] = "bottom", i.addClass(g[2])), l[1] && (a.extend(j, k.left), j.position[1] = "left", i.addClass(g[3])); if (l[0] || l[2]) j.offset[0] *= -1; if (l[1] || l[3]) j.offset[1] *= -1 } i.css({ visibility: "visible" }).hide() }); b.onBeforeShow(function () { var a = this.getConf(), b = this.getTip(); setTimeout(function () { a.position = [h[0], h[1]], a.offset = [h[2], h[3]] }, 0) }), b.onHide(function () { var a = this.getTip(); a.removeClass(e.classNames) }), ret = b }); return e.api ? ret : this } })(jQuery);
.tooltip {
    background-color: #FFFCE9;
    border: 1px solid #EDD2B8;
    border-radius: 3px 3px 3px 3px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
    color: #2B2B2B;
    display: none;
    font-size: 14px;
    line-height: 20px;
    padding: 10px;
    width: 300px;
    z-index: 2;
}
.tooltip .arrow {
    background: url("/img/arrow.png") no-repeat scroll left top transparent;
    height: 20px;
    left: -12px;
    position: absolute;
    top: 12px;
    width: 20px;
}