<a href="#" title="jQuery Tooltip is Amazing !!">jQuery Tooltip</a> provides easy way to implement attractive tooltips. <br /> <br /> <label for="Age">Age :</label> <input type="text" id="Age" title="Only above 20 are allowed" />
$(function () { $(document).tooltip({ position: { my: "center bottom-20", at: "center top", using: function (position, feedback) { $(this).css(position); $("<div>") .addClass("arrow") .addClass(feedback.vertical) .addClass(feedback.horizontal) .appendTo(this); } } }); });
.ui-tooltip, .arrow:after { background: black; border: 2px solid white; } .ui-tooltip { padding: 10px 20px; color: white; border-radius: 20px; font: bold 14px"Helvetica Neue", Sans-Serif; text-transform: uppercase; box-shadow: 0 0 7px black; } .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; } .arrow.top { top: -16px; bottom: auto; } .arrow.left { left: 20%; } .arrow:after { content:""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; box-shadow: 6px 5px 9px -9px black; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); tranform: rotate(45deg); } .arrow.top:after { bottom: -20px; top: auto; }