/    Sign up×
Community /Pin to ProfileBookmark

How can I control the font face, size and color of the text in my “alt” panels? I seem to remember managing it about three years ago, but I do not recall how. Perhaps I’m wrong – maybe I never did it. I’ve got XP Pro and IE6.

to post a comment
HTML

15 Comments(s)

Copy linkTweet thisAlerts:
@ray326Jan 05.2007 — You can't. You also shouldn't be using alt text like a tooltip. The proper attribute for that is title.
Copy linkTweet thisAlerts:
@KDLAJan 05.2007 — Ray's right.

One thing you'll run into, though, is that IE displays alt text, even if the title is designated. If you do use both "alt" and "title," you'll want to use the same descriptive text.

There's a javascript effect here: http://www.dyn-web.com/dhtml/tooltips/

similar to a tooltip. But please note, this does not aid in Accessibility. This is simply a javascript effect triggering "fake" title text; a screen reader will ignore this.

KDLA
Copy linkTweet thisAlerts:
@felgallJan 05.2007 — You don't necessarily have to make the alt and title text the same. IE will display the title text if the title is present and use the alt text correctly as a replacement for the image when the image can't be displayed. It only displays it incorrectly as a tooltip when the title attribute is missing.

The only browser that displays the alt text as a tooltip even when a proper tooltip is present in the title attribute is Netscape 4 and almost no one uses that any more.
Copy linkTweet thisAlerts:
@AscendancyJan 05.2007 — A lot of browsers I have seen have done that, even though there is only the alt tag. I feel like if they are going to use the alt tag for when the image link doesn't work AND as a tooltip, what's the point of the title attribute for the images?
Copy linkTweet thisAlerts:
@ray326Jan 05.2007 — what's the point of the title attribute for the images?[/QUOTE]From the W3C:

alt = text [CS]

[B]For user agents that cannot display images[/B], forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the lang attribute.

title = text [CS]

This attribute [B]offers advisory information[/B] about the element for which it is set.

. . .

Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource.
Copy linkTweet thisAlerts:
@JBJBauthorJan 06.2007 — Thanks for all that. I'm going to use [I]'title'[/I], and my panels will be large - but limited to the number of lines that will enable the panel to appear if the subject happens to be central on the screen when the visitor points to it. This seems to limit me to about twenty-two lines for my 17" monitor; but I guess I should make that about seventeen or eighteen lines, to cater for smaller monitors.

I suppose there's no way of controlling the length of time it appears without having to move the mouse slightly, is there?

JBJB
Copy linkTweet thisAlerts:
@ray326Jan 06.2007 — No and there's no guarantee the browser will show everything you've got in your title either. If you have a large amount of tool tip text then you'll need to use one of the Javascript tool tip libraries to display it.
Copy linkTweet thisAlerts:
@felgallJan 06.2007 — A lot of browsers I have seen have done that, even though there is only the alt tag. I feel like if they are going to use the alt tag for when the image link doesn't work AND as a tooltip, what's the point of the title attribute for the images?[/QUOTE]

the title attribute works on ANY tag not just images

the only browsers that display alt text as a tooltip are Internet Exploder and Netscape 4. Modern browsers DO NOT display it as a tooltip.
Copy linkTweet thisAlerts:
@Paul_JrJan 06.2007 — I can attest that IE 6 will display the whole tooltip, and FF 2.0 will display 90 characters (if it's longer than 90 characters, only 87 characters are displayed, followed by an ellipsis).
Copy linkTweet thisAlerts:
@felgallJan 06.2007 — If you want large tooltips then use Javascript to create them.
Copy linkTweet thisAlerts:
@KDLAJan 06.2007 — The link I provided previously will provide the Javascript alternative. I've found this method the easiest and flexible to work with, out of those out there.
Copy linkTweet thisAlerts:
@AscendancyJan 06.2007 — the title attribute works on ANY tag not just images

the only browsers that display alt text as a tooltip are Internet Exploder and Netscape 4. Modern browsers DO NOT display it as a tooltip.[/QUOTE]

Yea I know Title works for anything.

I am just saying that the ALT tag should be updated to work with anything, and it would show a tooltip and text when the image isn't displayed.
Copy linkTweet thisAlerts:
@felgallJan 06.2007 — The alt attribute is NEVER supposed to show a tooltip. Those browsers where it does have a bug in the browser code that is handling it WRONGLY. The alt attribute is for text that is supposed to display when the browser can't display the image.
Copy linkTweet thisAlerts:
@WebJoelJan 06.2007 — How about a pure CSS pop-up? It can be used to describe the content or meaning/purpose of the item-selected, and if I understand the use of the <span></span> correctly that serves this up, it will be accessible to screen-readers.

http://meyerweb.com/eric/css/edge/popups/demo.html

I have used the technique quite a bit, -it's alot of fun! ?
Copy linkTweet thisAlerts:
@ray326Jan 06.2007 — I am just saying that the ALT tag should be updated to work with anything, and it would show a tooltip and text when the image isn't displayed.[/QUOTE]You're missing the point of alt. The value of the alt attribute should be displayed at the point on the page where the browser cannot display the image regardless of mouse position or focus. There is no reason to add to that when the desired behavior is already defined by the title attribute.
×

Success!

Help @JBJB spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...