JSFiddle - React, Tailwind, and code Playground

by Michael Barros

HTML

<div class="copy-emoji-section">
  <div>
    <p class="emoji-copy-text" id="">Copy Emoji</p>
    <p class="emoji-copy" id="emoji_copy">😀</p>
    <button class="emoji-copy-button" id="emoji_copy_button">Copy Emoji</button>
  </div>
  <div class="your-tooltip">Copied!</div>
</div>

<div class="tooltip fade bottom in" style="top: 34px; left: 11.3359px; display: block;">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">Copied!</div>
</div>

CSS

.copy-emoji-section {
  position: relative;
}

.your-tooltip {
  opacity: 0;
  position: absolute;
  bottom:0;
  transition: all .3s;
  display: none;
}
 
.your-tooltip.show {
  opacity: 1;
  display: block;
}