Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WoW Pure CSS Tooltip: an experiment fo pure CSS tooltip on anchor elements
/*!
* 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 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.