Question

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?

Answer 1

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