'How to make jquery tooltip code?

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?
});
jquerytooltip


Solution 1:[1]

You need to add tooltip jquery file. Add tooptip Js reference(http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js) to your header I have added. Please check Demo. You can also use Poshytip

Solution 2:[2]

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 :)

Solution 3:[3]

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
});

});

Solution 4:[4]

Check this simple code for adding tool tip:

$("element").attr('title', 'tool tip text');

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 nrz
Solution 2 Gone Coding
Solution 3 Rahul Kumar
Solution 4 Tyler2P

Related Questions