By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,876 Members | 1,191 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,876 IT Pros & Developers. It's quick & easy.

Adjust style on ABBR or ACRONYM alternate text

P: n/a
I am using the ACRONYM tag to provide an explanation of codes within my
application. Example:

<p>The circuit <acronym title="Circuit P123T: Picton SS to Telebary
SS 345KV">P123T</acronym> is out
of service from 13:00 to 15:00 today</p>.

I would prefer a fancy balloon tip, but this allows me to store and retrieve
the text directly in a database table, and avoid having to add any
additional setup text to create any invisible balloon text. (Unless there is
another way).

I would like to change the style of the alternate text that appears, such as
increasing its font size and background color. Is there a way to do this as
CSS or in JavaScript ?

Thanks,
Jarson (jarson from sygration, that's a dot com company if you would like to
email me)
Jul 23 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
Jarson wrote:
I am using the ACRONYM tag to provide an explanation of codes within my
application. Example:

<p>The circuit <acronym title="Circuit P123T: Picton SS to Telebary
SS 345KV">P123T</acronym> is out
of service from 13:00 to 15:00 today</p>.

I would prefer a fancy balloon tip, but this allows me to store and retrieve
the text directly in a database table, and avoid having to add any
additional setup text to create any invisible balloon text. (Unless there is
another way).

I would like to change the style of the alternate text that appears, such as
increasing its font size and background color. Is there a way to do this as
CSS or in JavaScript ?


I'm pretty sure that amongst the tooltips at the link below there is
one that is attached when the page loads and works on the title or alt
text of whatever elements you choose to attach it to.

Users without JavaScript see their browsers default 'tooltip', those
with JavaScript see the enhanced, styled version.

<URL:http://www.walterzorn.com/tooltip/tooltip_e.htm>
Post again if you can't find what you want.
--
Rob
Jul 23 '05 #2

P: n/a
Jarson wrote:
<acronym title="Circuit P123T: Picton SS to Telebary SS
345KV">P123T</acronym>


In what way is that an acronym? Use <dfn> or a semantically meaningless
element like <span> instead.

(Followups trimmed.)
Jul 23 '05 #3

P: n/a
It is a semantic argument debating which tag best fits this purpose. True,
is not an Acronym but it also isn't a definition or an abbreviation.
However, I would surely switch to another tag if it provided a better
solution. None of them seem to provide a way to modify the style of their
title attribute.

Jarson

"Leif K-Brooks" <eu*****@ecritters.biz> wrote in message
news:Eh*******************@monger.newsread.com...
Jarson wrote:
<acronym title="Circuit P123T: Picton SS to Telebary SS
345KV">P123T</acronym>


In what way is that an acronym? Use <dfn> or a semantically meaningless
element like <span> instead.

(Followups trimmed.)

Jul 23 '05 #4

P: n/a
Gazing into my crystal ball I observed "Jarson" <ja*****@nospam.com>
writing in news:cz********************@news20.bellglobal.com:
I am using the ACRONYM tag to provide an explanation of codes within my
application. Example:

<p>The circuit <acronym title="Circuit P123T: Picton SS to
Telebary
SS 345KV">P123T</acronym> is out
of service from 13:00 to 15:00 today</p>.

I would prefer a fancy balloon tip, but this allows me to store and
retrieve the text directly in a database table, and avoid having to add
any additional setup text to create any invisible balloon text. (Unless
there is another way).

I would like to change the style of the alternate text that appears,
such as increasing its font size and background color. Is there a way
to do this as CSS or in JavaScript ?


If it is important that users know what the description is, then I would
show both the part number AND the description. Since IE does not render
any hint on the ACRONYM or ABBR elements, unless they are specifically
styled, the user would not know to mouse over anyway.

***
abbr, acronym {border-bottom:1px dashed #c0c0c0;} simulates Opera and
Firefoxes rendering of those elements for IE.
--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
Jul 23 '05 #5

P: n/a
Jarson wrote:
It is a semantic argument debating which tag best fits this purpose. True,
is not an Acronym
...so then there is no semantic argument. It is not an acronym.
but it also isn't a definition or an abbreviation.
However, I would surely switch to another tag if it provided a better
solution. None of them seem to provide a way to modify the style of their
title attribute.


Why not use a simple <span> as Leif suggested?

Please don't top-post.

--
-bts
-This space intentionally left blank.
Jul 23 '05 #6

P: n/a
Adrienne wrote:
abbr, acronym {border-bottom:1px dashed #c0c0c0;} simulates Opera and
Firefoxes rendering of those elements for IE.


Except that IE has (IIRC) absolutely no support for ABBR. It even
removes it from the DOM.
Jul 23 '05 #7

P: n/a
It is a semantic argument in the context that it is missing the point of the
question. My question is whether or not it is possible to alter the style
of the title attribute (and how). Sorry if I wasn't clear on that, and I
have just never seen a way of doing it. Any tag that displays alternate
text would do find -- I think changing the alternate text's style would be
useful for many applications.

Thanks, Jarson

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:FV******************@twister.nyroc.rr.com...
Jarson wrote:
It is a semantic argument debating which tag best fits this purpose.
True, is not an Acronym


..so then there is no semantic argument. It is not an acronym.
but it also isn't a definition or an abbreviation. However, I would
surely switch to another tag if it provided a better solution. None of
them seem to provide a way to modify the style of their title attribute.


Why not use a simple <span> as Leif suggested?

Please don't top-post.

--
-bts
-This space intentionally left blank.

Jul 23 '05 #8

P: n/a
Jarson wrote:

Please don't top-post.
http://oakroadsystems.com/genl/unice.htm#upside
It is a semantic argument in the context that it is missing the
point of the question. My question is whether or not it is
possible to alter the style of the title attribute (and how). Sorry
if I wasn't clear on that, and I have just never seen a way of
doing it. Any tag that displays alternate text would do find -- I
think changing the alternate text's style would be useful for many
applications.


The display of the standard title attribute can't be changed, as far
as I know. Some folks have written JavaScript "popups" that resemble
the tooltips that the title attribute uses, and they are customizable,
of course. Since I don't care for them, I have no references.

Your use of the words "alternate text" above ... I hope you don't mean
the alt attribute, which should not be mucked with.

--
-bts
-This space intentionally left blank.
Jul 23 '05 #9

P: n/a
Gazing into my crystal ball I observed Leif K-Brooks
<eu*****@ecritters.biz> writing in news:LcNge.4966$Cz3.612761
@monger.newsread.com:
Adrienne wrote:
abbr, acronym {border-bottom:1px dashed #c0c0c0;} simulates Opera and
Firefoxes rendering of those elements for IE.


Except that IE has (IIRC) absolutely no support for ABBR. It even
removes it from the DOM.


You're right. Another reason to hate that browser.

--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
Jul 23 '05 #10

P: n/a
Jarson wrote:
It is a semantic argument in the context that it is missing the point of the question. My question is whether or not it is possible to alter the style of the title attribute (and how). Sorry if I wasn't clear on that, and I have just never seen a way of doing it. Any tag that displays alternate text would do find -- I think changing the alternate text's style would be useful for many applications.

Thanks, Jarson

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message news:FV******************@twister.nyroc.rr.com...
Jarson wrote:
It is a semantic argument debating which tag best fits this purpose. True, is not an Acronym


..so then there is no semantic argument. It is not an acronym.
but it also isn't a definition or an abbreviation. However, I would surely switch to another tag if it provided a better solution. None of them seem to provide a way to modify the style of their title
attribute.
Why not use a simple <span> as Leif suggested?

Please don't top-post.

--
-bts
-This space intentionally left blank.


This subject has been seriously flogged/blogged for some time; notably:

http://larsholst.info/blog/2003/09/2...s-initialisms/

To answer your OQ: in addition to limited duration onscreen and some
weird truncation in (some) uas, HTMLElement.title isn't HTML and so
can't be styled w/CSS. You can toy with it as a string in IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

acronym {
font-weight: bold;
cursor: help;
}

</style>
<script type="text/javascript">

window.onload = function()
{
var i = 0, el, t, s = '',
els = document.getElementsByTagName('*');
while (el = els.item(i++))
if ((t = el.title) && (t = t.split(':')))
el.title = [
'\n ' ,
t[0] ,
': \n' ,
t[1].replace(/ /g, function(){return '\n'+(s+=' ')}) ,
'\n'
].join('');
}

</script>
</head>
<body>
<p>The circuit
<acronym title="Circuit P123T: Picton SS to Telebary SS 345KV">
P123T</acronym> is out of service from 13:00 to 15:00 today.
</p>
<p>The banana
<acronym title="Big Yellow Banana: Smooth, tasty, and good for you...">
Big Yellow Banana</acronym> is being cleaned from 4:44 to 4:46 as well.
</p>
</body>
</html>

Useless in mozilla, though. Might be modifiable some other way but
haven't seen it. Looked into 'pure CSS' tooltips?

http://www.communitymx.com/content/a...ge=1&cid=4E2C0

Jul 23 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.