Creating CSS-based tooltips
In today’s world websites, showing social icons for sharing content is common. How about adding some effects by way of tooltips as the visitors hover over any icon of social networks like Facebook, Twitter, LinkedIn, etc?
In this post, I am going to share such tooltip effects by using pure CSS.
In the demo, the icons of Facebook, Twitter, Pinterest, Instagram, and Snapchat are created by using SVG tag of HTML 5. As you bring the mouse over any icon, the tooltips with respective brand color appears with the social network name, have a look:
The CSS:
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
height: 100vh;
font: 16px Roboto, sans-serif;
background: #f9f9f9;
}
a {
text-decoration: none;
color: inherit;
}
.social-icon {
width: 36px;
height: 36px;
fill: currentColor;
-webkit-transition: .2s;
transition: .2s;
}
.social-cls-facebook:hover { color: #3b5998 }
.social-cls-twitter:hover { color: #55acee }
.social-cls-google:hover { color: #dd4b39 }
.social-cls-pinterest:hover { color: #bd081c }
.social-cls-instagram:hover { color: #833ab4 }
.social-cls-snapchat:hover { color: #fbe00f }
.social-cls-facebook:hover::after { background: #3b5998 }
.social-cls-twitter:hover::after { background: #55acee }
.social-cls-google:hover::after { background: #dd4b39 }
.social-cls-pinterest:hover::after { background: #bd081c }
.social-cls-instagram:hover::after { background: #833ab4 }
.social-cls-snapchat:hover::after { background: #fbe00f }
.c-link {
position: relative;
color: #bbb;
}
.c-link:not(:last-of-type) {
margin-right: 15px;
}
.c-tooltip::before,
.c-tooltip::after {
display: block;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, -10px);
transform: translate(-50%, -10px);
opacity: 0;
-webkit-transition: .2s;
transition: .2s;
}
.c-tooltip::before {
content: '';
bottom: calc(100% + 2px);
border: solid 5px transparent;
border-top-color: currentColor;
}
.c-tooltip::after {
content: attr(aria-label);
bottom: calc(100% + 12px);
padding: .61em .93em;
font-size: .875rem;
color: white;
border-radius: 3px;
}
.c-tooltip:hover::before,
.c-tooltip:hover::after {
opacity: 1;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
.pens-link-container {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
font-size: .9rem;
text-align: center;
}
.pens-link {
margin-bottom: 0;
background: white;
box-shadow: 0 4px 18px rgba(0, 0, 0, .1);
border: none;
}
The markup:
<a href="#0" class="c-link social-cls-facebook c-tooltip" aria-label="Facebook"> <svg class="social-icon"><use xlink:href="#icon--facebook"></use></svg> </a> <a href="#0" class="c-link social-cls-twitter c-tooltip" aria-label="Twitter"> <svg class="social-icon"><use xlink:href="#icon--twitter"></use></svg> </a> <a href="#0" class="c-link social-cls-google c-tooltip" aria-label="Google+"> <svg class="social-icon"><use xlink:href="#icon--google"></use></svg> </a> <a href="#0" class="c-link social-cls-pinterest c-tooltip" aria-label="Pinterest"> <svg class="social-icon"><use xlink:href="#icon--pinterest"></use></svg> </a> <a href="#0" class="c-link social-cls-instagram c-tooltip" aria-label="Instagram"> <svg class="social-icon"><use xlink:href="#icon--instagram"></use></svg> </a> <a href="#0" class="c-link social-cls-snapchat c-tooltip" aria-label="Snapchat"> <svg class="social-icon"><use xlink:href="#icon--snapchat"></use></svg> </a> <svg style="display: none"> <symbol id="icon--facebook" viewBox="0 0 24 24"> <path d="M19,4V7H17A1,1 0 0,0 16,8V10H19V13H16V20H13V13H11V10H13V7.5C13,5.56 14.57,4 16.5,4M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" /> </symbol> <symbol id="icon--twitter" viewBox="0 0 24 24"> <path d="M17.71,9.33C17.64,13.95 14.69,17.11 10.28,17.31C8.46,17.39 7.15,16.81 6,16.08C7.34,16.29 9,15.76 9.9,15C8.58,14.86 7.81,14.19 7.44,13.12C7.82,13.18 8.22,13.16 8.58,13.09C7.39,12.69 6.54,11.95 6.5,10.41C6.83,10.57 7.18,10.71 7.64,10.74C6.75,10.23 6.1,8.38 6.85,7.16C8.17,8.61 9.76,9.79 12.37,9.95C11.71,7.15 15.42,5.63 16.97,7.5C17.63,7.38 18.16,7.14 18.68,6.86C18.47,7.5 18.06,7.97 17.56,8.33C18.1,8.26 18.59,8.13 19,7.92C18.75,8.45 18.19,8.93 17.71,9.33M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" /> </symbol> <symbol id="icon--google" viewBox="0 0 24 24"> <path d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" /> </symbol> <symbol id="icon--pinterest" viewBox="0 0 24 24"> <path d="M13,16.2C12.2,16.2 11.43,15.86 10.88,15.28L9.93,18.5L9.86,18.69L9.83,18.67C9.64,19 9.29,19.2 8.9,19.2C8.29,19.2 7.8,18.71 7.8,18.1C7.8,18.05 7.81,18 7.81,17.95H7.8L7.85,17.77L9.7,12.21C9.7,12.21 9.5,11.59 9.5,10.73C9.5,9 10.42,8.5 11.16,8.5C11.91,8.5 12.58,8.76 12.58,9.81C12.58,11.15 11.69,11.84 11.69,12.81C11.69,13.55 12.29,14.16 13.03,14.16C15.37,14.16 16.2,12.4 16.2,10.75C16.2,8.57 14.32,6.8 12,6.8C9.68,6.8 7.8,8.57 7.8,10.75C7.8,11.42 8,12.09 8.34,12.68C8.43,12.84 8.5,13 8.5,13.2A1,1 0 0,1 7.5,14.2C7.13,14.2 6.79,14 6.62,13.7C6.08,12.81 5.8,11.79 5.8,10.75C5.8,7.47 8.58,4.8 12,4.8C15.42,4.8 18.2,7.47 18.2,10.75C18.2,13.37 16.57,16.2 13,16.2M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" /> </symbol> <symbol id="icon--instagram" viewBox="0 0 24 24"> <path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" /> </symbol> <symbol id="icon--snapchat" viewBox="0 0 24 24"> <path d="M12,20.45C10.81,20.45 10.1,19.94 9.47,19.5C9,19.18 8.58,18.87 8.08,18.79C6.93,18.73 6.59,18.79 5.97,18.9C5.86,18.9 5.73,18.87 5.68,18.69C5.5,17.94 5.45,17.73 5.32,17.71C4,17.5 3.19,17.2 3.03,16.83C3,16.6 3.07,16.5 3.18,16.5C4.25,16.31 5.2,15.75 6,14.81C6.63,14.09 6.93,13.39 6.96,13.32C7.12,13 7.15,12.72 7.06,12.5C6.89,12.09 6.31,11.91 5.68,11.7C5.34,11.57 4.79,11.29 4.86,10.9C4.92,10.62 5.29,10.42 5.81,10.46C6.16,10.62 6.46,10.7 6.73,10.7C7.06,10.7 7.21,10.58 7.25,10.54C7.14,8.78 7.05,7.25 7.44,6.38C8.61,3.76 11.08,3.55 12,3.55C12.92,3.55 15.39,3.76 16.56,6.38C16.95,7.25 16.86,8.78 16.75,10.54C16.79,10.58 16.94,10.7 17.27,10.7C17.54,10.7 17.84,10.62 18.19,10.46C18.71,10.42 19.08,10.62 19.14,10.9C19.21,11.29 18.66,11.57 18.32,11.7C17.69,11.91 17.11,12.09 16.94,12.5C16.85,12.72 16.88,13 17.04,13.32C17.07,13.39 17.37,14.09 18,14.81C18.8,15.75 19.75,16.31 20.82,16.5C20.93,16.5 21,16.6 20.97,16.83C20.81,17.2 20,17.5 18.68,17.71C18.55,17.73 18.5,17.94 18.32,18.69C18.27,18.87 18.14,18.9 18.03,18.9C17.41,18.79 17.07,18.73 15.92,18.79C15.42,18.87 15,19.18 14.53,19.5C13.9,19.94 13.19,20.45 12,20.45Z" /> </symbol> </svg>
Credit: nxworld