revision:
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>
<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>
<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>