views:

32

answers:

1

Next to an input field, I want to have a small '[?]' link which will display a brief clarification. I would like this link to display this tooltip both when the mouse hovers over the [?] as well as when the [?] is clicked. There is no other action associated with this [?] link.

A normal tooltip (as provided by browsers when faced with HTML tag or the jquery tooltip plugin) disappears once the element is clicked, which is useful for most scenarios but not this one. How can I have the tooltip be shown on click, too?

<label for='myInput'>
   Type here
   <a href='#' title='brief explanation!'>[?]</a>:
</label>
<input id='myInput' name='myInput'/>

How can I achieve this effect?

+1  A: 

You can do this with qTip. Use show: { when: { event: 'click' } }.

BalusC
@BalusC: thanks! That makes the tooltip show up when I click on the link. But do you know how do I *also* make it show up on hover? My question is how to preserve normal tooltip behavior *while* also being triggered by clicks. I tried passing an array of events but it didn't work: show: { when: { event: ['click','mouseover'] } }
laramichaels
Separate by space, thus e.g. `event: 'click mouseover'`.
BalusC
actually, the behavior I intended is achieved by using qtip in its default mode (same as "show: {when: {event: 'mouseover'} }"). If the link is disabled/href='#', then the tooltip remains visible upon being clicked. many thanks!
laramichaels
OK, you're welcome.
BalusC