jQuery Tooltip

by narensrinivasans

HTML

<h5>Click the following lines</h5>

<p class="whateverOne" data-tip="Tooltip one">Toolitip 1</p>
<p class="whateverTwo" data-tip="Tooltip two">Toolitip 2</p>
<p class="whateverThree" data-tip="Tooltip three">Toolitip 3</p>

<input type="text" class="testInput" data-tip="Tooltip text" name="text" id="text" />

<!-- Tooltip -->
<span class="tooltip">test</span>

CSS

p {
    background: whitesmoke;
    border: 1px solid #ccc;
    cursor: pointer;
    padding: 5px;
    position: relative;
    z-index: 1;
}
.testInput {
    position: relative;
}
.tooltip {
    background: #333;
    border: 1px solid #bbb;
    color: #fff;
    cursor: pointer;
    display: none;
    padding: 5px;
    position: absolute;
    right: 0;
    -webkit-transition: all 0.8s linear;
	-moz-transition: all 0.8s linear;
	-ms-transition: all 0.8s linear;
	-o-transition: all 0.8s linear;
	transition: all 0.8s linear;
    z-index: 2;
}

JavaScript

// You can use the below if you need to mention particular elements than all <p> tags...
// $(".whateverOne, .whateverTwo, .whateverThree").hover(function() {
$("p").hover(function() {
    var tip = $(".tooltip");
    var tiptext = $(this).attr("data-tip");
    $(this).append(tip);
    $(tip).show().text(tiptext);
}).on("mouseleave", function() {
    $(".tooltip").hide();
});

// Tooltip for input types
$(".testInput").hover(function() {
    var tip = $(".tooltip");
    var tiptext = $(this).attr("data-tip");
    $(tip).insertAfter($(this));
    $(tip).show().text(tiptext);
}).on("mouseleave", function() {
    $(".tooltip").hide();
});