Search jQuery

jQuery Forum

tooltip for help icons

in Using jQuery UI • 4 years ago

I want to place a help icon next to each form field, and show tooltip as long as mouse is on the help icon (just on icon not clicking it.) I don't want to show tooltip by hover on form field like the demo.

I have several help icons and by mouse hover on each of them, a separate message should be shown just for that help icon.

reading documentation I am confused between this:

$( ".selector" ).tooltip({
items: "img[alt]"
});

and this one:

$( function() {
  var tooltips = $( "[title]" ).tooltip({
   position: {
    my: "left top",
    at: "right+5 top-5",
    collision: "none"
   }
  });
});

I assume, the first one is for showing alt of all images and I don't want that happens. I guess I can have title tag for help icons and the second function shows them? Is it the correct choice for what I want to do? Or what is the best way to go?

Replies(4)

nimasdj1

Re: tooltip for help icons

4 years ago

Well, I simply used:

<script type="text/javascript" src="jquery.js"></script>
<script rel="stylesheet" type="text/css" src="jquery-ui.css"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$( document ).tooltip();
</script>

Then inside my text field form I have a help icon as below:

<tr class="main">
<td class="left">Your name: </td>
<td class="right"><input type="text" size="30" name="name" value="" />  <img title="this is tooltip" src="help.jpg" alt="" width="16" height="16" /></td>
</tr>

But I see a sudden tooltip on a wrong position. what wrong I did?
I am suing cupertino theme with only font family changed to "Arial,Helvetica,sans-serif" and size change to "1em" customization.
I used developper tool and got no error. *structure.js and *theme.js of downloaded package are present in folder too.
Please advice.