JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<p><strong>Follow us</strong></p>
<ul class="c-social-links">
  <li class="c-social-links__item instagram">
  <a title="Follow us on Instagram" aria-describedby="social-tooltip-instagram" href="#" target="_blank" class="c-social-links__link"><span class="hidden">Instagram</span></a>
  <div role="tooltip" id="social-tooltip-instagram" class="c-social-links__label">Follow us on Instagram</div>
  </li>
  <li class="c-social-links__item facebook">
  <a title="Become a fan on Facebook" aria-describedby="social-tooltip-facebook" href="#" target="_blank" class="c-social-links__link"><span class="hidden">Facebook</span></a>
    <div role="tooltip" id="social-tooltip-facebook" class="c-social-links__label">Become a fan on Facebook</div>
  </li>
  <li class="c-social-links__item twitter">
  <a title="Follow us on Twitter" aria-describedby="social-tooltip-twitter" href="#" target="_blank" class="c-social-links__link"><span class="hidden">Twitter</span></a>
  <div role="tooltip" id="social-tooltip-twitter" class="c-social-links__label">Follow us on Twitter</div>
  </li>
</ul>

SCSS

[role="tooltip"] {display: none;}
.hidden {border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.c-social-links__item {position: relative; display: inline-block;}

	.c-social-links__label {position: absolute; bottom:100%; left:50%; transform:translateX(-50%); background-color: red; color:white; white-space:nowrap;}

	.c-social-links__link {display: inline-block; background:red; width:20px; height:20px;
		&:hover + [role="tooltip"],  
		&:focus + [role="tooltip"] {  
		  display: block;
		}
	}