Can an Abbr Tag's Title Be Styled

Can you style a abbr tag?

• Can you style a tag using css?

  Yes, you can.

• In firefox, it is displayed with dots underneath the words

  Yes. Firefox default style is

  abbr[title], acronym[title] {
      border-bottom: 1px dotted;
  }
  

• Is this a browser by browser thing?

  Yes, this behaviour is determined by the default stylesheet of each browser. Then, different browsers may display it different by default.

• Can you remove the dots?

  Yes, just override the default syle:

  abbr[title], acronym[title] {
      border-bottom: none;
  }
  

Can an abbr tag's title be styled?

If you mean style the actual text that pops up, no you can't style that with CSS; it's browser-specific. Javascript-based tooltips would be the way I would handle it, since it allows to have more control over this behavior.

Using HTML abbr tag to explain content

You actually don't need to use the <abbr> tag to use the title= attribute. You can apply it to many things, including <span> tags.

Example of use:

<span title="This is my explanation here.">Confusing text</span>

From w3schools.com: By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and search-engine indexers.

In other words, you'll provide misleading information to search engines when there is no reason to, by incorrectly using the <abbr> tag.

HTML5 Abbr Tag How To Style Title OnHover Text Message

Want to do it custom ?

CSS3 :

abbr:hover:before {
   content: attr(title);
}

Demo : http://jsfiddle.net/NzntY/

or change your attr whatever you want...

<abbr data-yeah="United States of America">USA</abbr>

So

content: attr(data-yeah);

Is it possible to nest abbr tag inside a title attribute?

Short answer: No, you can't nest a tag in an attribute. http://www.w3.org/TR/html5/dom.html#attr-title

I recommend writing just Doctor, as was already mentioned in the comments :)

Can you animate a abbr title in CSS?

You need to use a value where transition is numbers : opacity for instance. DEMO

abbr:hover::after {
    opacity:1;
}
abbr::after {
    position: absolute;
    opacity:0;
    height:auto;
    width:475px;
    bottom: -50px;
    color:black !important;
    left: 0;
    display: block;
    padding: 1em;
    background: gold;
    border-radius:2px;
    content: attr(title);
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:1s;/* DO NOT FORGET THE REGULAR ONE */
    }

In the demo, pseudo already exists but is translucide untill you hover <abbr>

What element to use for the reverse of abbr

Unfortunately, HTML doesn't have a dedicated element that represents the expanded form of an abbreviation.

This example from the HTML5 spec on abbr seems pretty close to your use case, except the abbreviation appears after the expansion in a paragraph, not in a dd element following a dt containing the abbreviation. The example demonstrates using a dfn element to mark up the expansion:

<p>The <dfn id=whatwg>Web Hypertext Application Technology
Working Group</dfn> (<abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr>)
is a loose unofficial collaboration of Web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

Based on the description of dfn, which says (emphasis mine):

The dfn element represents the defining instance of a term. The paragraph, description list group, or section that is the nearest ancestor of the dfn element must also contain the definition(s) for the term given by the dfn element.

you should be able to mark up your content similarly:

<dt><abbr title="Cascading Style Sheets">CSS</abbr></dt>
<dd>Short for <dfn>Cascading Style Sheets</dfn>. This is the name of
    the language that stylesheets are written in.</dd>

However, I'm not sure if it's appropriate for a dfn to appear in a dd rather than its associated dt, even within the same dl. If this bothers you, the next closest alternative without having to resort to a span, is i:

<dt><abbr title="Cascading Style Sheets">CSS</abbr></dt>
<dd>Short for <i>Cascading Style Sheets</i>. This is the name of
    the language that stylesheets are written in.</dd>

(and I'd probably add the dfn as a child of the dt and parent of the abbr instead as well)

ABBR tooltip CSS styling: How to suppress original tooltip, add rounded corners?

Since you can't prevent/hide the title attribute from showing on hover, just use a different attribute. A data-* attribute such as data-title would work. Just change the markup and the content value.

Example Here

<abbr data-title="As Soon As Possible">ASAP</abbr>

abbr:hover::after {
    content: attr(data-title);
    /* .. */
}

As for the rounded corners, just use the border-radius property.

---

Related Topics