<h1 class="tooltip" data-tooltip="The creator was too lazy to think of a useful tooltip, so I'm here! How was your day?">Tooltips</h1>
@import url('https://fonts.googleapis.com/css?family=Ubuntu:500&display=swap');


.tooltip {
  --tooltip-color-bg: hsl(231, 20%, 85%);
  position: relative;
}

.tooltip:hover::before, .tooltip:hover::after,
tooltip:focus::before, .tooltip:focus::after{
  opacity: 1;
  pointer-event: auto;
}

.tooltip::before, .tooltip::after {
  font-size: 16px;
  opacity: 0;
  pointer-event: none;
  
  transition: opacity 300ms ease;
}

.tooltip::before {
  content: "";
  display: block;
  
  position: absolute;
  top: 25%;
  left: calc(100% - 0.5em);
  
  border: 0.8em transparent solid;
  border-right: 0.8em var(--tooltip-color-bg) solid;
}

.tooltip::after {
  content: attr(data-tooltip);
  display: block;
  
  position: absolute;
  top: 0;
  left: calc(100% + 1em);
  min-width: 200px;
  
  padding: 0.8em 1em;
  border-radius: 5px;
  
  color: hsl(231, 20%, 20%);
  background-color: var(--tooltip-color-bg);
}



/* OTHER */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  font-family: 'Ubuntu', sans-serif;
  color: hsl(231, 20%, 85%);
  background-color: #121420;
}

h1 {
  margin: 0.5em 0;
}
// Nothing here.
// Just kepping a reference for some css stuff

/*

Colors:

- bg:     #e7e247
- yellow: #ead94c
- red:    #bf4e30

- white with a hint of bg: hsl(231, 20%, 85%)

Fonts:

- font-family: 'Ubuntu', sans-serif;

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.