X
Publisher: Sigit purnomo kangsigit.com@gmail.com

How to Install Automatic Tooltip with jQuery and CSS


Tooltip function to display the title on an image, link and any coded title = "" in an html. Tooltip will appear when the object is highlighted with mouse and it will disappear when the spotlight is released.

Here are the steps to install Tooltip on Blogger (blogspot.com)
Make sure in your blog template already contained an external script like this. If not, please add after <head>
<!-- Library jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Add this CSS in the head
<style>
#tooltip {
  text-align: center;
  color: #fff;
  background: #111;
  position: absolute;
  z-index: 100;
  padding: 15px;
  border-radius: 3px;
}
#tooltip:after /* triangle decoration */ {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #111;
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
}
#tooltip.top:after {
  border-top-color: transparent;
  border-bottom: 10px solid #111;
  top: -20px;
  bottom: auto;
}
#tooltip.left:after {
  left: 10px;
  margin: 0;
}
#tooltip.right:after {
  right: 10px;
  left: auto;
  margin: 0;
}
</style>

Advertisement


Add jQuery is in the body
<script>
//<![CDATA[
// Setting options :
$("a").addClass("tooltip");
$("img").addClass("tooltip");
$("p").addClass("tooltip");

$(function() {
    var targets = $("[class~=tooltip]"),
        target = false,
        tooltip = false,
        title = false;
    targets.bind("mouseenter", function() {
        target = $(this);
        tip = target.attr("title");
        tooltip = $('<div id="tooltip"></div>');
        if (!tip || tip == "") {
            return false
        }
        target.removeAttr("title");
        tooltip.css("opacity", 0).html(tip).appendTo("body");
        var init_tooltip = function() {
            if ($(window).width() < tooltip.outerWidth() * 1.5) {
                tooltip.css("max-width", $(window).width() / 2)
            } else {
                tooltip.css("max-width", 340)
            }
            var pos_left = target.offset().left + (target.outerWidth() / 2) - (tooltip.outerWidth() / 2),
                pos_top = target.offset().top - tooltip.outerHeight() - 20;
            if (pos_left < 0) {
                pos_left = target.offset().left + target.outerWidth() / 2 - 20;
                tooltip.addClass("left")
            } else {
                tooltip.removeClass("left")
            } if (pos_left + tooltip.outerWidth() > $(window).width()) {
                pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
                tooltip.addClass("right")
            } else {
                tooltip.removeClass("right")
            } if (pos_top < 0) {
                var pos_top = target.offset().top + target.outerHeight();
                tooltip.addClass("top")
            } else {
                tooltip.removeClass("top")
            }
            tooltip.css({
                left: pos_left,
                top: pos_top
            }).animate({
                top: "+=10",
                opacity: 1
            }, 50)
        };
        init_tooltip();
        $(window).resize(init_tooltip);
        var remove_tooltip = function() {
            tooltip.animate({
                top: "-=10",
                opacity: 0
            }, 50, function() {
                $(this).remove()
            });
            target.attr("title", tip)
        };
        target.bind("mouseleave", remove_tooltip);
        tooltip.bind("click", remove_tooltip)
    })
});
//]]>

</script>
  • Click save and see the results
How to Install Automatic Tooltip with jQuery and CSS
Add Comments
0 Comments
Click Here to Add Comments

No Comment