CODEWITHSUNDEEP
jquerycss
Kango
Kango

Reputation: 847

show Jquery tooltip onclick of textbox insted of mousehover

I am using Jquery tooltip.
How can i display tooltip onclick of textbox insted of mouseover. what css have use to display tooltip arrow at center(for second textbox) for second textbox its moving down.

HTML

<br/><br/>
<input id="ag22" title="We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes." />

<br/><br/>
<input id="ag22" title="We ask for your age only for statistical purposes." />

jQuery

$(document).tooltip({
    position: {
        my: "left center",
        at: "right center",
        using: function (position, feedback) {
            $(this).css(position);
            $("<div>")
                .addClass("arrow")
                .addClass(feedback.vertical)
                .addClass(feedback.horizontal)
                .appendTo(this);
        }
    }
});

Here is the link i have tried: http://fiddle.jshell.net/b7SCN/

Upvotes: 1

Views: 15244

Answers (2)

Chaitanya Munipalle
Chaitanya Munipalle

Reputation: 724

Dont do anything on mouseover, add this before initializing tooltip. You might have to disable focusin also

$('input').on('mouseover',function(e) {
    e.preventdefault();
});

trigger tooltip open on click

$('input').on('click',function(e) {
    $(this).tooltip('open');
});

Edit : Change $(document).tooltip to $('input').tooltip

Upvotes: 0

Donovan Charpin
Donovan Charpin

Reputation: 3397

You can add a trigger to simulate the mouseover when you click like in this jsFiddle

http://jsfiddle.net/AK7pv/

After you can't add two element with the same ID, use CLASS to have multiple element

Check on this subject : jQueryUI tooltip Widget to show tooltip on Click

Upvotes: 4

Related Questions