show Jquery tooltip onclick of textbox insted of mousehover

Question

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/

score 4 · Answer 1 · edited May 23 '17 at 12:20

4

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

edited May 23 '17 at 12:20

Community

1
1

answered Sep 25 '13 at 09:05

Donovan Charpin

3,567
22
30

`+1` for being funny, – Math chiller Sep 25 '13 at 09:06
I have add source :). – Donovan Charpin Sep 25 '13 at 09:11
@DonovanCharpin:need to close tooltip if click on any where. – Kango Sep 25 '13 at 09:13
@DonovanCharpin: In the first link you have use another div to display tooltip but i am trying to use it for title attribute. – Kango Sep 25 '13 at 09:21

Chaitanya Munipalle · Answer 2 · 2013-09-25T10:12:30.947

0

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

edited Sep 25 '13 at 10:12

answered Sep 25 '13 at 09:16

Chaitanya Munipalle

724
4
12

Change $(document).tooltip to $('input').tooltip. It will work – Chaitanya Munipalle Sep 25 '13 at 09:39
@ChaitanyaMunipalle:It work for click ,but when i hovermouse on textbox its show difault title tootlip. – Kango Sep 25 '13 at 11:07
As per this question, It is showing tooltip on click instead of mouseover. You have to figure out a hack to not display default title, there are many hacks for that in stackoverflow itself. – Chaitanya Munipalle Sep 25 '13 at 11:20

show Jquery tooltip onclick of textbox insted of mousehover

2 Answers2