How to add tooltip in jquery? I want to display title, but whatever I try does not work.
JSFiddle: jsfiddle.net/5fsCK/
example: http://jquerytools.org/demos/tooltip/form.html
$(document).ready(function () {
// What to put here?
});
-
you can use qtip2 qtip2.comNetorica– Netorica2014-02-05 17:02:11 +00:00Commented Feb 5, 2014 at 17:02
Add a comment
|
5 Answers
There's not really a need for jQuery UI or any other external resource. Just add a div with class 'tooltip' and initially set it to display: none. See this JSFiddle: http://jsfiddle.net/NJF8a/
JavaScript
$(document).ready(function () {
$("input").on("focus", function () {
$(".tooltip").hide();
var left = $(this).width();
var top = $(this).offset().top;
$(".tooltip").css({
position: "absolute",
left: left,
top: top
}).html($(this).attr("title")).fadeIn(500);
}).on("blur", function () {
if ($(".tooltip").is(":visible")) $(".tooltip").fadeOut(500);
});
});
1 Comment
iCollect.it Ltd
That approach kind of defeats the whole reusability aspect of jQuery + UI coding, but hey, whatever the customer wants :)
Your example JSFiddle and the JQueryUI sample page work fine when combined:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/5fsCK/1/
The only thing I did was include JQueryUI (and the sample code)
$(document).ready(function () {
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 30],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
});
The position is not correct (styling issue), but I am dashing out the door right now :)
Comments
Try this working jsfiddle demo
I added some External resources.
$(document).ready(function () {
$('#demo-basic').poshytip({className: 'tip-darkgray',
bgImageFrameSize: 11,
offsetX: -25
});
$('#inputtext').poshytip({className: 'tip-darkgray',
bgImageFrameSize: 11,
offsetX: -25
});
});
Comments
Check this simple code for adding tool tip:
$("element").attr('title', 'tool tip text');
