HTML5 Abbr Tag How To Style Title OnHover Text Message

Question

<abbr title="United States of America">USA</abbr>

when you go on USA with your cursor it shows up a text box how we can edit that text box need CSS TAG

You cannot. If you want to do this, you have to do it with javascript (and CSS). Look at this for example : http://jqueryui.com/tooltip/#custom-style — kmas, Nov 22 '13 at 09:26
possible duplicate of [Is it possible to style a title? (and with CSS or js?)](http://stackoverflow.com/questions/4383148/is-it-possible-to-style-a-title-and-with-css-or-js) — unor, Nov 22 '13 at 09:27

l2aelba · Accepted Answer · 2013-11-22T11:47:39.690

1

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);

edited Nov 22 '13 at 11:47

answered Nov 22 '13 at 11:40

l2aelba

21,591
22
102
138

1

Solving in this way Works terrible on Mozilla and IE Browsers. [JSFiddle](http://jsfiddle.net/NzntY/1/) – fiskolin Nov 22 '13 at 14:17
Just a concept/demo @FranciscoCarvalho :P – l2aelba Nov 22 '13 at 14:20

tomsullivan1989 · Answer 2 · 2013-11-22T09:42:02.173

You can use a custom Tooltip if you want to be able to style a text box that appears on hover. See:

See this DEMO, which has the following jQuery to add the tooltip:

$(function () {
    $(document).tooltip({
    });
});

With these CSS classes:

.ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
}
.ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px"Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
}

And remember you will need to include a reference the jQuery UI:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

HTML5 Abbr Tag How To Style Title OnHover Text Message

2 Answers2