WoW Pure CSS Tooltip: an experiment fo pure CSS tooltip on anchor elements

wow-tooltip-legacy.0.3.0.js

/*!
 * WoW Pure CSS Tooltip: an experiment fo pure CSS tooltip on anchor elements.
 * 
 * This script sets the `aria-label` attribute on all anchors if it's not set or empty.
 * It uses the contents of the `title` attribute, if present, and remove the title
 * attribute in order to avoid the browser native tooltip.
 * Meant to be used with the companion WoW Pure CSS Tooltip styles.
 * 
 * See: https://gist.github.com/celsobessa/c98e45d2074be5cd915febfed37feeda
 * (c) 2019 Celso Bessa, MIT License, https://www.celsobessa.com.br
 */
 ;(function () {

    'use strict';
  
    var defaults =  {
        allAnchors: true, 
        selector : '.wow-tooltip',
    }; 

    var docAnchors, docAnchorsLength;
    if ( true === defaults.allAnchors ) {
        defaults.selector = 'a';
    };
    docAnchors = document.querySelectorAll(defaults.selector);
    docAnchorsLength = docAnchors.length;
  
    for (var i = 0; i < docAnchorsLength; i++) {
     
        if (docAnchors[i].hasAttribute('aria-label') && '' !== docAnchors[i].getAttribute('aria-label')) {
            docAnchors[i].removeAttribute('title');
            continue;
        }
     
        if (!docAnchors[i].hasAttribute('title')) {
            continue;
        }
     
        docAnchors[i].setAttribute('aria-label', docAnchors[i].title);
     
        docAnchors[i].removeAttribute('title');
    };

})();

wow-tooltip.0.3.0.css

/*!
 * WoW Pure CSS Tooltip: an experiment fo pure CSS tooltip on anchor elements.
 * For this technique to work properly, you should not use title attributes, 
 * as the browser will see them generate their own tooltips. You can use the
 * companion Javascript to get setup `aria-label` attributes and remove the title
 * attribute in order to avoid the browser native tooltip.
 * 
 * See: https://gist.github.com/celsobessa/c98e45d2074be5cd915febfed37feeda
 * (c) 2019 Celso Bessa, MIT License, https://www.celsobessa.com.br
 */

/* basic style.
content taken from a title as fallback */
.see-footnote::before {
    background-color: #fc0;
    color: #222;
    content: attr(title);
    display:none;
    /*font-family: "Roboto", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;*/
    font-size: 1rem;
    left: 1.5em;
    line-height: 1.2;
    max-width: 300px;
    min-height: 1.5em;
    padding: 1rem;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    width: 30rem;
}
/* content taken from aria-label. this is the most accessible and recommended option */
.see-footnote::before {
    content: attr(aria-label);
}

/* you might use content taken from custom data attributes as well */
/*
.see-footnote::before {
    content: attr(data-custom-attribute);
}*/

.see-footnote:hover::before {
    display:initial;
}