Animated jQuery Tooltip on Hover and Click – jquery.tooltip.js

Animated jQuery Tooltip on Hover and Click – jquery.tooltip.js
In this tutorial I am going to share awesome jQuery tooltip plugin to add animated tooltip while user mouse over on text or button and also you can display tooltip on button click. Helpful for creating small icon or text with long description tooltip whenever your user will hover on any icon you can display a descriptive detail about the icon or you have seen a ? mark icon with any input box whenever you clicked that ? mark icon or mouse over a tooltip popup will open with full description about that inputbox like what user need to type that input field.

Integrate Animated jQuery Tooltip

Follow below steps for adding tooltip feature on your website.

Libraries

Plugin dependent on jQuery core library so include it first after that load plugin library jquery.tooltip.js, You can also load google font library for styling tooltip font this library is optional.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.tooltip.js"></script>

HTML

Below is the sample buttons to show you tooltip on mouse over and button clicked with tooltip direction.

<div class="container">
    <div class="row">
        <div class="col">
            <div class="box js-tooltip-hover-top" data-id="I'm id">Hover top <span class="info">text generates from data attribute</span></div>
            <div class="box js-tooltip-hover-bottom">Hover bottom</div>
            <div class="box js-tooltip-hover-left">Hover left</div>
            <div class="box js-tooltip-hover-right">Hover right</div>
        </div>
        <div class="col">
 
            <div class="box js-tooltip-click-bottom">Click bottom</div>
            <div class="box js-tooltip-click-left">Click left</div>
            <div class="box js-tooltip-click-right">Click right</div>
            <div class="box js-tooltip-click-top">Click top</div>
 
        </div>
    </div>
</div>

CSS

Add following css on page for styling tooltip you can customize bellow CSS as per your project look and feel.

.box {
    margin: 20px;
    font-size: 20px;
    text-align: center;
    padding: 20px;
    border: 1px solid gray;
    border-radius: 10px;
    cursor: pointer;
    width: 170px;
}
 
.tooltip-box {
    position: absolute;
    background: #06d0ff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 25px 7px rgba(108, 108, 108, 0.16);
    text-align: center;
    font-size: 16px;
    color: #fff;
}
 
.tooltip-box span {
    vertical-align: middle;
}
 
.info {
    font-size: 13px;
    color: #969696;
    line-height: 1;
    display: block;
}
 
.icon {
    margin-left: 10px;
    display: inline-block;
    width: 16px;
    height: 16px;
}
 
.icon img {
    vertical-align: middle;
}
 
.arrow {
    width: 0;
    height: 0;
    position: absolute;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #06d0ff;
}
 
/* ANIMATIONS */
 
/* Open/close animations */
 
/* fade */
 
.tooltip-fade {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -ms-transition-property: opacity;
    transition-property: opacity;
}
.tooltip-fade.tooltip-show {
    opacity: 1;
}
 
/* grow */
 
.tooltip-grow {
    -webkit-transform: scale(0,0);
    -moz-transform: scale(0,0);
    -o-transform: scale(0,0);
    -ms-transform: scale(0,0);
    transform: scale(0,0);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-backface-visibility: hidden;
}
.tooltip-grow.tooltip-show {
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
 
/* swing */
 
.tooltip-swing {
    opacity: 0;
    -webkit-transform: rotateZ(4deg);
    -moz-transform: rotateZ(4deg);
    -o-transform: rotateZ(4deg);
    -ms-transform: rotateZ(4deg);
    transform: rotateZ(4deg);
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
}
.tooltip-swing.tooltip-show {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
    -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
    -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
    -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
    -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
    transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
}
 
/* fall */
 
.tooltip-fall {
    -webkit-transition-property: top;
    -moz-transition-property: top;
    -o-transition-property: top;
    -ms-transition-property: top;
    transition-property: top;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltip-fall.tooltip-initial {
    top: 0;
}
.tooltip-fall.tooltip-show {
}
.tooltip-fall.tooltip-dying {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    top: 0;
    opacity: 0;
}
 
/* slide */
 
.tooltip-slide {
    -webkit-transition-property: left;
    -moz-transition-property: left;
    -o-transition-property: left;
    -ms-transition-property: left;
    transition-property: left;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltip-slide.tooltip-initial {
    left: -40px;
}
.tooltip-slide.tooltip-show {
}
.tooltip-slide.tooltip-dying {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    left: 0;
    opacity: 0;
}
 
@media screen and (max-width: 600px){
    .col {
        width: 100%;
    }
}

JS

Now call the plugin function on page load make your tooltip actionable.

$(function() {   
  $('.js-tooltip-hover-bottom').tooltip({
        layout: '<div class="tooltip-box"><div class="arrow"></div>Tooltip hover bottom</div>',
        animation: 'grow'
    });
});

You can set custom tooltip display direction with animation.

$(function() {   
  var HoverTooltipTop = new Tooltip({
        elem: $('.js-tooltip-hover-top'),
        layout: function (elem) {
            return '<div class="tooltip-box"><div class="arrow"></div>' + elem.data('id') + '</div>';
        },
        position: 'top',
        margin: 20,
        animation: 'fall',
        animationDuration: 800
    });
});

If you want to display tooltip on button click then use below code.

$(function() {   
   var ClickTooltipTop = new Tooltip({
        elem: $('.js-tooltip-click-top'),
        layout: '<div class="tooltip-box top">' +
        '<div class="arrow"></div>' +
        '<span>Tooltip click top</span>' +
        '<a href="http://iamrohit.in" class="js-close icon"><img src="close.png" alt=""></a>' +
        '</div>',
        position: 'top',
        mode: 'click',
        animation: 'fall',
        animationDuration: 800
    });
});

Error Sort

Search This Blog