CODEWITHSUNDEEP
jquerytooltip
golaz
golaz

Reputation: 71

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

Upvotes: 1

Views: 173

Answers (5)

Prashant Shravan Ujjainkar
Prashant Shravan Ujjainkar

Reputation: 23

Check this simple code for adding tool tip:

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

Upvotes: 0

Monirul Islam
Monirul Islam

Reputation: 935

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

Upvotes: 1

ZiNNED
ZiNNED

Reputation: 2650

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

Upvotes: 0

Rahul Kumar
Rahul Kumar

Reputation: 524

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

});

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

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

Upvotes: 0

Related Questions