Pragmatic, simple tooltip

HTML

<p>
    Please
    <a href="#" data-tooltip="In under 30 seconds">sign up</a>,
    <a href="#" data-tooltip="Welcome back!">log in</a>,
    or <a href="https://twitter.com/csswizardry" target="_blank" data-tooltip="More CSS goodness to come…">follow me on Twitter</a>.
</p>

<span data-tooltip=''<h1 style="background-color:DodgerBlue;">Hello World</h1>">
    <img src="https://pbs.twimg.com/profile_images/378800000842511021/741a0a2593ea55bbd6238f8705c7074f.jpeg" width="128" height="128" alt="A photo of Harry Roberts on stage" />
</span>

SCSS

/*------------------------------------*\
    #TOOLTIPS
\*------------------------------------*/

/**
 * A simple tooltip component. Simply drop a `data-tooltip` attribute onto
 * (almost) any element and have a tooltip placed center-bottom on hover.
 *
 * Because the tooltip text is sourced from a `data-*` attribute, do not use
 * it for any content which *needs* to be accessible: use it for decorative
 * information only.
 */

/**
 * 1. Tooltips require positioning context.
 */
[data-tooltip] {
    position: relative; /* [1] */

    /**
     * 1. Hide our tooltips by default. This is still ‘accessible’ as our tooltip
     *    text only exists in generated content anyway.
     */
    &:before,
    &:after {
        content: none;
        content: normal;
    }

    /**
     * Show the tooltip when we give the element attention.
     *
     * 1. Fade tooltips in gradually so they don’t appear too abruptly.
     * 2. Populate the tooltips when we show the element some attention.
     * 3. Source the tooltip’s content from its `data-tooltip` attribute.
     */
    &:hover,
    &:active,
    &:focus {

        &:before,
        &:after {
            -webkit-animation: 0.5s tooltip linear;
               -moz-animation: 0.5s tooltip linear;
                    animation: 0.5s tooltip linear;
        }

        &:before {
            content: ""; /* [2] */
        }

        &:after {
            content: attr(data-tooltip); /* [2] [3] */
        }

    }

    /**
     * Create an arrow (linking the tooltip to its originator) using pure
     * CSS triangles.
     */
    &:before {
        position: absolute;
        top: 100%;
        left: 50%;
        margin-top:  -3px;
        margin-left: -5px;
        border: 5px solid transparent;
        border-bottom-color: #f43059;

    }

    /**
     * The textual part of the tooltip.
     *
     * 1. Position the text center–bottom.
     */
    &:after {
        position: absolute; /* [1] */
        top: 100%; /* [1] */
  ...