Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/title-aria-label-style.html

Last active June 4, 2018 14:31
Show Gist options
  • Save nfreear/e105f08200a8afbfb440 to your computer and use it in GitHub Desktop.
Save nfreear/e105f08200a8afbfb440 to your computer and use it in GitHub Desktop.
Download ZIP
How to change the style of Title attribute inside the anchor tag? (aria-label) | http://stackoverflow.com/questions/2011142
Raw
title-aria-label-style.html
<!doctype html> <title> *How to change the style of Title attribute inside the anchor tag? </title>
<link rel=stylesheet href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css">
<style>
body {
margin: 1em 3em;
font: .95em sans-serif;
background: #fdfdfd;
color: #333;
}
button {
font-size: 1em;
padding: 5px 10px;
color: #222;
}
.fa, [class *= "fa-"] {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: navy;
}
a:hover,
a:focus,
button:hover,
button:focus {
position: relative;
cursor: pointer;
}
a[aria-label]:hover:after,
a[aria-label]:focus:after,
button[aria-label]:hover:after,
button[aria-label]:focus:after {
font-size: 1.2em;
content: attr(aria-label);
padding: 4px 8px;
margin-top: 2px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
background: #fafafa; /* MSIE 8 */
text-decoration: none;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0px 0px 4px #333;
background-image: -moz-linear-gradient(top, #fafafa, #ddd); /*Was: #eeeeee, #cccccc*/
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fafafa),color-stop(1, #ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
}
button[aria-label]:hover:after,
button[aria-label]:focus:after {
margin: 0;
top: -140%;
}
</style>
<h1> How to change the style of Title attribute inside the anchor tag? </h1>
<p> I modified the original by: switching to the <tt>aria-label</tt> attribute; adding support for <tt>:focus</tt>; adding support for MSIE 8; and adding support for <tt>&lt;button></tt>s, eg. for a media player.
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#" aria-label="Hello, i am a link">Vestibulum</a> tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#" aria-label="This is another link">Mauris placerat</a> eleifend leo.
<h2> Media player controls </h2>
<p> Icon font: Font Awesome
<p> <button aria-label="Play"><i class=fa-play></i></button> <button aria-label="Pause"><i class=fa-pause></i></button>
<pre>
NDF, 13 June 2014 <i class=fa-heart></i> https://gist.github.com/nfreear/e105f08200a8afbfb440
* http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag
* http://jsfiddle.net/tDQWN/
* http://fortawesome.github.io/Font-Awesome/icons/#video-player
* https://github.com/FortAwesome/Font-Awesome/issues/3176
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment