::before
and ::after
pseudo-elements as discussed in one of my recent posts in Growing with the Web.The styles are compatible with the latest Chrome, Firefox, Opera, Safari as well as IE9. They also degrade gracefully by simply not displaying the popup to IE8 and below.
CSS
a[data-popup] { position: relative; display: inline-block; } a[data-popup]:hover::after { content: attr(data-popup); display: block; position: absolute; background: black; opacity: 0.75; min-width: 70px; max-width: 250px; white-space: pre; padding: 8px; top: 35px; color: white; z-index: 100; } a[data-popup]:hover::before { content: " "; display: block; position: absolute; bottom: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid black; opacity: 0.75; top: 20px; left: 20px; }
SASS
a[data-popup] { $popup-background-color: #000; $popup-color: #FFF; $popup-opacity: .75; $popup-top: 20px; // Should be >= line-height $popup-left: 20px; $popup-arrow-size: 15px; $popup-padding: 8px; position: relative; display: inline-block; // Fixes links that wrap &:hover { &::after { content: attr(data-popup); display: block; position: absolute; background: $popup-background-color; opacity: $popup-opacity; min-width: ($popup-left + $popup-arrow-size) * 2 max-width: 250px; white-space: pre; padding: $popup-padding; top: $popup-top + $popup-arrow-size; color: $popup-color; z-index: 100; // We want this on top of everything } &::before { content: " "; display: block; position: absolute; bottom: 0; border-left: $popup-arrow-size solid transparent; border-right: $popup-arrow-size solid transparent; border-bottom: $popup-arrow-size solid $popup-background-color; opacity: $popup-opacity; top: $popup-top; left: $popup-left; } } }