Jump to content
Sign in to follow this  
teamcrunk

Is there A way to use JavaScript to add help bubbles?

Recommended Posts

Is there a Way with Javascript to add Help bubbles over an input Box?For example when you you hover over an input for Name: _____ it would say like First Name????ThanksAn example is this https://edit.europe.yahoo.com/registration?.intl=ukWhen you go over the name field it says First name in a bubble. Ive been searching all over and can not find out how to do it.

Share this post


Link to post
Share on other sites

The 'title' attribute is definitely the easiest way to achieve what you're after. It will trigger the basic 'tooltip' behaviour of the browser. example:

  Name: <input type="text" title="First Name">

Of course there are several ways to make that prettier, using javascript, but this works prefectly adequately.

Share this post


Link to post
Share on other sites

To enhance it you can download JQuery UI, reference it and then put the following script onto your document

$(document).tooltip();

. You can then use the title attribute as above.

Share this post


Link to post
Share on other sites
Of course there are several ways to make that prettier, using javascript, but this works prefectly adequately.
You don't even need JavaScript. You can use pure CSS to make tooltips like that. Then they look pretty and work even if JS is disabled.

Share this post


Link to post
Share on other sites
You don't even need JavaScript. You can use pure CSS to make tooltips like that. Then they look pretty and work even if JS is disabled.
I guess it depends on whether you're going for correctness, or ease of use and the ability to make your website look the same across all browsers.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...