Hvordan jeg laget tooltip for teknologi ikonet til prosjekt-kortet på forsiden til tjernstad-utvikling.no.

I utgangspunktet ønsket jeg en ren CSS løsning, mest fordi jeg hadde lyst, og tenkte at det skulle være mulig. Etter et kjapt google søk fant jeg løsningen på LogRockets blog

Trikset bak denne løsningen er å laste teksten til css content ved hjelp av: attr(data-text);.

Et eksempel på html hvor man kan benytte denne tooltipen.

1<div class="tooltip" data-text="Tooltip tekst">
2    <a href="#">Link</a>
3</div>

Gjengivelse av min css. Med mine tilpassninger i forhold til LogoRockets sitt orginale eksempel

1.tooltip {
2  position: relative;
3}
4
5.tooltip:before {
6  content: attr(data-text); /* here's the magic */
7  position: absolute;
8  z-index: 10;
9
10  top: -1.9rem;
11  transform: translateX(-1rem);
12
13  /* move to right */
14  left: 100%;
15  margin-left: 15px; /* and add a small left margin */
16
17  /* basic styles */
18  padding: 0.3rem;
19
20  white-space: nowrap;
21  background: #000;
22  color: #fff;
23  text-align: center;
24
25  opacity: 0;
26  transition: 0.3s opacity;
27}
28
29.tooltip:after {
30  content: "";
31  position: absolute;
32  z-index: 10;
33
34  top: -0.6rem;
35  transform: translateX(0rem);
36
37  transform: rotate(-45deg);
38
39  /* the arrow */
40  border: 15px solid var(--yellow);
41  border-radius: 90px;
42  border-color: transparent var(--yellow) transparent transparent;
43
44  opacity: 0;
45  transition: 0.3s opacity;
46}
47
48.tooltip:hover:before,
49.tooltip:hover:after {
50  opacity: 1;
51}
52