Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save nrrrdcore/a7f5f918fb712ca9d372 to your computer and use it in GitHub Desktop.
Save nrrrdcore/a7f5f918fb712ca9d372 to your computer and use it in GitHub Desktop.
Tiny Design Hack: Write JavaScript-less, Dynamic Tooltip Text with CSS
<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>
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;
}
}

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment