Jump to content
makaveli

Tooltips

Recommended Posts

hello,

 

ive noticed on many sites that have abbiviations or 'jargon' in text they offer a tooltip,

this is underlined with a dotted line, and when you hover over it the mouse icon becomes a '?' as well as in a small box displaying the chosen text.

 

is this code w3c compliant and what is it if you know? i'd like to use it to make things more 'plain english'

thanks :)

Share this post


Link to post
Share on other sites

You are refering to Acronyms and abbreviations

 

<P>Welcome to the <acronym title="World Wide Web">WWW</acronym>!

or

<abbr title="Social Security Number">SS#</abbr>

 

You can style them as you please

 

 

/* style sheet */

abbr, acronym {

border-bottom: 1px dotted blue;

cursor: help;

color: blue;

}

Share this post


Link to post
Share on other sites

The key is the title attribute. You can use the title attribute with any tag and the text you put in there will appear when they mouse over that tag. As for the underline and cursor change that's just CSS. I use the title attribute in Lazarus to explain what image links are for.

Share this post


Link to post
Share on other sites

great advice guys :unsure:

it's nice to have tooltips as it really does save you from having to explain in the main body what "big words mean" so tidies up the page :)

 

just getting in to css, its a bit confusing at first but im warming to it

Share this post


Link to post
Share on other sites

Although we are talking about the title tag, don't forget to use the alt tag on images for those that have images turned off as well as for validation. All img tags should have an alt tag.

Share this post


Link to post
Share on other sites

The alt attribute (yes, it’s an attribute, not a tag) contains an alternative description, and is required for images and image maps. It can only be used for the img, area, and input elements (and the deprecated applet element). For the input element, the alt attribute is meant to be used for graphical submit buttons: <input type="image" src="image.gif" alt="Submit" />.

 

Use the alt attribute to provide text for visitors who, for whatever reason, can’t see the images in your document. This includes visitors using browsers that cannot display images or have image display disabled, visually impaired visitors, and screen screen reader users. Alt text is to be used instead of an image, not as additional information.

Share this post


Link to post
Share on other sites

Who said anything about the alt atribute? We are talking about the title attribute not the alt attribute.

Share this post


Link to post
Share on other sites

I have this set up on my own IPB forum, its very handy for novices to put the mouse over the underlined text and see what the word really means

 

JimE

Share this post


Link to post
Share on other sites

The <abbr> tag defines an abbreviation or an acronym, like "Mr.", "Dec.", "ASAP", "ATM". Tip: An abbreviation and an acronym are both shortened versions of

https://www.welookups.com/tags/tag_abbr.html

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.


×
×
  • Create New...