revision:
The data-* attributes are used to store custom data private to the page or application. The data-* attributes give the ability to embed custom data attributes on all HTML elements.
Custom data attributes allow to add own information to tags in HTML. These attributes are not specific to HTML5 and the data-* attribute can be used on all HTML elements. They can be used to define own custom data attributes.
The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).
data-* attributes consist of two parts: 1/ the attribute name should NOT contain any uppercase letters, and must be at least one character long after the prefix "data-"; 2/ the attribute value can be any string.
<element data-*="somevalue">
"somevalue" specifies the value of the attribute (as a string).
HTML syntax: any attribute on any element whose attribute name starts with data- is a data attribute.
<article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars">
…
</article>
JavaScript access : reading the values of these attributes out in JavaScript is simple: use "getAttribute()" with their full HTML name to read them. But the standard defines a simpler way: a DOMStringMap you can read out via a "dataset" property. To get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camelCase).
<script>
const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")
article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
</script>
CSS access : as data attributes are plain HTML attributes, you can even access them from CSS. For example to show the parent data on the article you can use generated content in CSS with the "attr() function":
article::before {content: attr(data-parent);}
You can also use the attribute selectors in CSS to change styles according to the data:
article[data-columns="3"] {width: 400px;}
article[data-columns="4"] {width: 600px;}
Click on a species to see what type it is:
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
</ul>
<script>
function showDetails(animal) {
let animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
Click on a vegetable to see the sowing time:
<ul id="vegetable-seeds">
<li onclick="seeDetails(this)" data-spacing="10cm" data-sowing-time="March to June">Carrots
<li onclick="seeDetails(this)" data-spacing="30cm" data-sowing-time="January to March">Celery
<li onclick="seeDetails(this)" data-spacing="3cm" data-sowing-time="March to September">Radishes
</ul>
<script>
function seeDetails(vegetable) {
let vegetableType = vegetable.getAttribute("data-spacing");
let vegetableTime = vegetable.getAttribute("data-sowing-time");
alert("The " + vegetable.innerHTML + " spacing is " + vegetableType + "," +
"and " + "sowing time is from " + vegetableTime + ".");
}
</script>
Click on a species to see what type it is:
<div class=example_one>
<ul>
<li onclick="showType(this)" id="owl" data-animal-type="bird">Owl</li>
<li onclick="showType(this)" id="salmon" data-animal-type="fish">Salmon</li>
<li onclick="showType(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
<li onclick="showDetails(this)" id="sparrow" data-animal-type="bird">Sparrow</li>
<li onclick="showDetails(this)" id="tuna" data-animal-type="fish">Tuna</li>
<li onclick="showDetails(this)" id="black widow" data-animal-type="spider">Black widow</li>
</ul>
</div>
<style>
.example_one ul {margin: 1vw 2vw;}
.example_one li {position: relative; width:25vw; padding-bottom: 1vw;}
</style>
<script>
function showDetails(animal) {
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
Click on the name to see the ID number
<div>
<p>Click on the name to see the ID number</p>
<ul>
<li onclick="showId(this)" id="Walters" data-id="10784">Jason Walters, 003, found dead
in "A View to a Kill", </li>
<li onclick="showId(this)" id="Trevelyan" data-id="97865">Alex Trevelyan, 006, agent
turned terrorist leader (James' nemesis in "Goldeneye"),</li>
<li onclick="showId(this)" id="Bond" data-id="45732">James Bond, 007, the main man;
shaken but not stirred, </li>
</ul>
</div>
<style>
.example_two li{position: relative; width: 30vw; padding-bottom: 1vw;}
</style>
<script>
function showId(id) {
var dataId = id.getAttribute("data-id");
alert("The ID number of " + id.innerHTML + " is " + dataId + ".");
}
</script>
<div>
<div class="hint"><span class="french"></span><span>French</span></div>
<div class="hint"><span class="veg"></span><span>Vegetarian</span></div>
<div class="hint"><span class="german"></span><span>German</span></div>
<ul>
<li data-type="veg" data-distance="2miles" data-identifier="10318">Restaurant A</li>
<li data-type="german" data-distance="3miles" data-identifier="10318">Restaurant B</li>
<li data-type="french" data-distance="1mile" data-identifier="10318">Restaurant C</li>
<li data-type="veg" data-distance="4miles" data-identifier="10548">Restaurant D</li>
<li data-type="french" data-distance="3miles" data-identifier="10318">Restaurant E</li>
<li data-type="french" data-distance="1mile" data-identifier="10318">Restaurant F</li>
<li data-type="veg" data-distance="2miles" data-identifier="12315">Restaurant G</li>
<li data-type="german" data-distance="1mile" data-identifier="10318">Restaurant H</li>
<li data-type="german" data-distance="2miles" data-identifier="12315">Restaurant I</li>
</ul>
</div>
<style>
.example_three ul {list-style: none; padding: 0;}
.example_three li {padding: 1vw; margin: 1vw 0; color: white; border-radius: 1vw;}
.hint {margin-left: 2vw; display: inline-block;}
span.french, span.veg, span.german {width: 1.5vw; height: 1.5vw;border-radius: 50%;
display: inline-block; margin-right: 1vw; }
span.french {background: #3F51B5;}
span.veg {background: #8BC34A;}
span.german {background: #bb6666;}
li[data-type='veg'] {background: #8BC34A; position: relative;}
li[data-type='french'] {background: #3F51B5; position: relative;}
li[data-type='german'] {background: #bb6666; position: relative;}
li[data-type='veg']:after,li[data-type='french']:after,li[data-type='german']:after
{content:"distance: " attr(data-distance);opacity: 0;margin-left: 5vw; position: absolute;
top: 0vw; background: black; color: white;padding: 2px; border: 1px solid #eee; opacity: 0;
transition: 0.5s opacity;}
li:hover:after{opacity: 1;}
</style>
The gray wolf, also known as the some more information timber wolf or western wolf, is a canine native to the wilderness and remote areas of Eurasia and some more information North America. It is the largest extant member of its family, with males averaging 43–45 kg (95–99 lb), and females 36–38.5 kg (79–85 lb). Like the red wolf, it is distinguished from other some more informationCanis species by its larger size and less pointed features, particularly on the ears and muzzle.
<div>
<p >The gray wolf, also known as the <span class="tooltip_1" data-tooltip="subspecies
of Canis lupus">
<span class="tooltip_1-info">some more information </span>timber wolf</span> or
western wolf, is a canine native to the
wilderness and remote areas of Eurasia and <span class="tooltip_1" data-tooltip="USA,
Canada, and Mexico"><span
class="tooltip_1-info">some more information </span>North America</span>. It is the
largest extant member of its
family, with males averaging 43–45 kg (95–99 lb), and females 36–38.5 kg (79–85 lb).
Like the red wolf, it is distinguished
from other <span class="tooltip_1" data-tooltip="see Wikipedia for more info"><span
class="tooltip_1-info">some more
information</span>Canis species </span> by its larger size and less pointed features,
particularly on the ears and muzzle.
</p>
</div>
<style>
span.tooltip_1 {padding: 0vw 1vw; position: relative; background: #FFBB99;
cursor: pointer;}
.tooltip_1-info {position: absolute; top: -9999vw; left: -9999vw;}
span.tooltip_1::before {content: attr(data-tooltip); position: absolute; top: 1.5vw;
font-size: 1vw; padding: 1px 5px;
display: none; color: white; background: seagreen; border-radius: 4px;
transition: opacity 0.1s ease-out; z-index: 99;
text-align: left;}
span:hover::before {display: inline-block;}
</style>
<span class="tooltip_3" data-text="Thanks for hovering! I'm a tooltip">Hover over me!</span>
<style>
.tooltip_3 {position:relative; border-bottom:1px dashed #000; }
.tooltip_3:before { content: attr(data-text); position:absolute; top:50%;transform:translateY(-50%);
left:100%; margin-left:15px; width:200px;padding:10px;
border-radius:10px; background:#000; color: #fff; text-align:center; display:none;}
.tooltip_3:hover:before {display:block;}
.tooltip_3:after {content: "";position:absolute; left:100%; margin-left:-5px;top:50%;
transform:translateY(-50%); border:10px solid #000;
border-color: transparent black transparent transparent;display:none;}
.tooltip_3:hover:before, .tooltip_3:hover:after {display:block;}
</style>
<ul class="one">
<li onclick="showDetails(this)" id="permanent_record" data-book-author="Edward Snowden">
Permanent Record</li>
<li onclick="showDetails(this)" id="the_Shining" data-book-author="Stephen King">
The Shining</li>
<li onclick="showDetails(this)" id="broken_wings" data-book-author="Sarojini Naidu">
Broken Wings </li>
<li onclick="showDetails(this)" id="out_of_the_dust" data-book-author="Karen Hesse">
Out of the Dust</li>
</ul>
<style>
.one p{padding-left: 2vw; font: 1.25vw arial;}
.one li{margin-left: 5vw;padding-top: 1vw;}
</style>
<script>
function showDetails(book) {
var bookauthor = book.getAttribute("data-book-author");
alert(book.innerHTML + ": " + " is written by " + bookauthor + ".");
}
</script>
<div data-columns="2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div data-columns="3">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
</div>
<div data-columns="4">
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<style>
[data-columns] {display: grid; grid-gap: 0.5vw; padding: 0.5vw;
margin: 0 0 1vw 0;}
[data-columns] > div {height: 5vw; background: lightgrey; text-align: center;
font: 2vw bold; }
[data-columns="2"] {background: #64B5F6; grid-template-columns: repeat(2, 1fr);}
[data-columns="3"] {background: #9CCC65; grid-template-columns: repeat(3, 1fr);}
[data-columns="4"] {background: #FFB74D; grid-template-columns: repeat(4, 1fr);}
</style>
<div>
<h4>Positioning the tooltips</h4>
<section class="second_example">
<button aria-label="Hi, there!" data-balloon-pos="down">hover me!</button>
<button aria-label="What's up!" data-balloon-pos="right">hover me!</button>
<button aria-label="Hello, there!!" data-balloon-pos="left">hover me!</button>
<button aria-label="Again, what's up!" data-balloon-pos="up">hover me!</button>
<button aria-label="What's up, dude!" data-balloon-pos="up-left">hover me!</button>
<button aria-label="Nice to hear from you!" data-balloon-pos="up-right">hover me!</button>
<button aria-label="No jokes today!" data-balloon-pos="down-left">hover me!</button>
<button aria-label="See you soon!" data-balloon-pos="down-right">hover me!</button>
</section>
<h4>Length</h4>
<section>
<button data-balloon-length="small" aria-label="Hi." data-balloon-pos="up">hover me!</button>
<button data-balloon-length="medium" aria-label="In this tooltip, we get a quite long text, just to show that big is possible." data-balloon-pos="up">I'm a medium tooltip.
</button>
<button data-balloon-length="large" aria-label="we can go even further and make a tooltipthat could challenge the size of your Window. Basically, there are no
limits to the length of a tooltip. The only limit is the usefullness of the information you wanrt to cover in a tooltip." data-balloon-pos="up">I'm a large
tooltip</button>
<button data-balloon-length="xlarge" aria-label="And to make it even larger, we can recite a definition of what a short story is: a story with a fully developed theme
but significantly shorter and less elaborate than a novel. The short story genre, or short story form, encompasses fully developed fictional stories that are typically
between 1,000 and 20,000 words."data-balloon-pos="up">I'm a Xlarge tooltip</button>
<button data-balloon-length="fit" aria-label="The tooltip can made in such a way that it adopt its width to the available space on the webpage." data-balloon-pos="up">
my width will fit to element</button>
</section>
<h4>disabling animation</h4>
<section>
<button data-balloon-blunt aria-label="No animation!" data-balloon-pos="up">no animation! </button>
</section>
<h4>showing tooltips programatically</h4>
<section>
<button data-balloon-visible aria-label="You will always see me!" data-balloon-pos="down">always visible!</button>
</section>
<h4>customizing tooltips</h4>
<section>
<button aria-label="I am red!" data-balloon-pos="up" data-tooltip="red">I am red!</button>
<button aria-label="I have big text!" data-balloon-pos="up" data-tooltip="big-text">I have big text!</button>
<button aria-label="I move a lot!" data-balloon-pos="up" data-tooltip="slide">I move a lot!</button>
</section>
<h4>glyphs and icon fonts</h4>
<section>
<button aria-label="HTML special characters: ☻ ✂ ♜" data-balloon-pos="up">hover
me!</button>
<button aria-label="Emojis: 😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">hover me!
</button>
<button class="font-awesome" aria-label="Font Awesome:
" data-balloon-pos="up">hover me!</button>
</section>
</div>
<style>
section {padding: 1vw; border-radius: 1vw; max-width: 96vw; display: flex; flex-flow: row nowrap; justify-content: space-around;}
button {display: block; width: 5vw; height: 4vw;font-size: 1vw; background-color:rgb(199, 121, 20); color:white;}
button[aria-label][data-balloon-pos] {overflow: visible; }
[aria-label][data-balloon-pos] {position: relative; cursor: pointer; }
[aria-label][data-balloon-pos]:after {opacity: 0; pointer-events: none; transition: all 0.18s ease-out 0.18s; text-indent: 0; font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-weight: normal; font-style: normal; text-shadow: none; font-size: 0.8vw; background: black; border-radius: 15%; color: #fff; content: attr(aria-label); padding:
0.5vw 0.5vw; position: absolute; white-space: nowrap; z-index: 10; }
[aria-label][data-balloon-pos]:before {width: 0; height: 0; border: 0.5vw solid transparent; border-top-color: black; opacity: 0; pointer-events: none; transition: all 0.18s
ease-out 0.18s; content: ""; position: absolute; z-index: 10;}
[aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label]
[data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):
focus:after {opacity: 1; pointer-events: none; }
[aria-label][data-balloon-pos].font-awesome:after {font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;}
[aria-label][data-balloon-pos][data-balloon-break]:after {white-space: pre; }
[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {white-space: pre-line; word-break: break-word;}
[aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after {transition: none;}
[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos]
[data-balloon-pos="down"]:hover: after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after {transform: translate(-50%, 0); }
[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before,
[aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before {transform:
translate(-50%, 0); }
[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after {left: 0; }
[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before {left: 0.5vw;}
[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after {right: 0; }
[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before {right: 0.5vw; }
[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-left"][data-balloon-visible]:after, [aria-label]
[data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after {transform: translate(0, 0); }
[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-left"][data-balloon-visible]: before,
[aria-label][data-balloon-pos]
[data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before {transform: translate(0, 0); }
[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {bottom: 100%;transform-origin: top;
transform: translate(0, 0.4vw);}
[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {margin-bottom: 1vw; }
[aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after {left: 50%;transform: translate(-50%, 0.4vw); }
[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {top: 100%;transform: translate(0,
calc(0.4vw * -1));}
[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {margin-top: 1vw; }
[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before {width: 0; height: 0; border: 0.5vw solid transparent; border-bottom-color: black;}
[aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before {left: 50%;transform: translate(-50%,
calc(0.4vw * -1)); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]
[data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label]
[data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after {transform: translate(0, -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label]
[data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label]
[data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before { transform: translate(0, -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label]
[data-balloon-pos][data-balloon-pos="left"]:before {right: 100%; top: 50%;transform:
translate(0.4vw, -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:after {margin-right: 1vw; }
[aria-label][data-balloon-pos][data-balloon-pos="left"]:before {width: 0;height: 0;border: 0.5vw solid transparent; border-left-color: black; }
[aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {left: 100%; top: 50%;transform: translate
(calc(0.4vw * -1), -50%); }
[aria-label][data-balloon-pos][data-balloon-pos="right"]:after {margin-left: 1vw; }
[aria-label][data-balloon-pos][data-balloon-pos="right"]:before {width: 0; height: 0; border: 0.5vw solid transparent; border-right-color:black; }
[aria-label][data-balloon-pos][data-balloon-length]:after {white-space: normal;}
[aria-label][data-balloon-pos][data-balloon-length="small"]:after {width: 8vw;}
[aria-label][data-balloon-pos][data-balloon-length="medium"]:after {width: 15vw;}
[aria-label][data-balloon-pos][data-balloon-length="large"]:after {width: 26vw; }
[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {width: 38vw; }
[aria-label][data-balloon-pos][data-tooltip="red"]:after{background-color: red;position: absolute;}
[aria-label][data-balloon-pos][data-tooltip="big-text"]:after{font-size: 3vw;position: absolute;}
[aria-label][data-balloon-pos][data-tooltip="slide"]:after{transform: translate(2vw, 3vw);}
@media screen and (max-width: 768px) {
[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {width: 90vw; }
[aria-label][data-balloon-pos][data-balloon-length="fit"]:after {width: 100%; }}
</style>