Tooltip arrow (using right/left 100% instead of the fixed value)

right: 100%; overwrite: right: auto; left: 100%

by Konstantin Rouda

HTML

<div class="o-tooltip o-tooltip--left"></div>

<div class="o-tooltip o-tooltip--right"></div>


<div>
  <p id="source">
  <style>#source { color: red; }</style>
Take a look at<br>how this text<br>is interpreted
       below.
  <span style="display:none">HIDDEN TEXT</span>
</p>
</div>

CSS

BODY {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  min-height: 100vh;
  background: rgba(251, 251, 251, .9);
}

* {
 box-sizing: border-box; 
}

/**** MAIN STYLE ****/

.o-tooltip {
  position: relative;
  width: 400px;
  height: 200px;
  padding: 1rem;
  --tooltip-bg: rgba(245, 245, 245, 1);
  background: var(--tooltip-bg);
  border-radius: 0.7rem;
  box-shadow: 0px 2px 5px 0px rgba(30, 30, 30, .11);
  filter: drop-shadow(0px 2px 5px rgba(30, 30, 30, .11));
} 

.o-tooltip::before {
  content: "";
  position: absolute;
  border: 15px solid transparent;
}

.o-tooltip--left::before {
  right: 100%;
  border-right-color: var(--tooltip-bg);
}


.o-tooltip--right::before {
  /*right: auto;*/
  left: 100%;
  border-left-color: var(--tooltip-bg);
}