Tiny Design Hack: Write JavaScript-less, Dynamic Tooltip Text with CSS

index.html

<button class="integration-checklist__copy-button">   
</button>




<span class="signature"><a href="https://twitter.com/nrrrdcore">@nrrrdcore</a> &nbsp;&nbsp;|&nbsp;&nbsp; <a  href="https://getclef.com/about/">getclef.com</a></span>

style.css

body {
  background: #f0c973;
  font-family: Helvetica, Arial, sans-serif;
}

.integration-checklist__copy-button {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  
  cursor: pointer;
  
  background-color: #fff;
  background-image: url('https://abs.twimg.com/emoji/v1/72x72/1f4cb.png'); /* Twitter clipboard emoji */
  background-size: 60% auto;
  background-position: center center;
  background-repeat: no-repeat;
  border: 1px solid rgba(0,0,0,.29);
  border-bottom-color: rgba(0,0,0,.36);
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0,0,0,.12);
  
  &:before {
    content: '';
    display: none;
    position: absolute;
    z-index: 9998;
    top: 35px;
    left: 15px;
    width: 0;
    height: 0;
    
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(0,0,0,.72);
  }

  &:after {
    content: 'Copy to Clipboard';
    display: none;
    position: absolute;
    z-index: 9999;
    top: 40px;
    left: -37px;
    width: 114px;
    height: 36px;

    color: #fff;
    font-size: 10px;
    line-height: 36px;
    text-align: center;

    background: rgba(0,0,0,.72);
    border-radius: 3px;
  }
  
  &:hover {
    background-color: #eee;
    
    &:before, &:after {
      display: block;
    }
  }
  
  &:active, &:focus {
    outline: none;
    
    &:after {
      content: 'Copied!';
    }
  }
}

.signature {
  position: absolute;
  right: 12px;
  bottom: 12px;
  
  color: rgba(0,0,0,.07);
  font-size: 10px;
}

a {
  color: rgba(13,157,219,.55);
  font-weight: 500;
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
  }
}

Tiny Design Hack: Write JavaScript-less, Dynamic Tooltip Text with CSS.markdown

Pass in tooltip text with pseudo classes and the content: ''; property. The text changes with the parent's, in this case the button's, hover and active and focus states.

***Caveat: A user has to click out of button focus state for text to change back.

A Pen by Julie Horvath on CodePen.

License.