Second method using CSS and custom attributes
- Add the class “cs-tooltip” to your social element (or any element for that matter)
- Add the custom attribute “data-tooltip” to your element (the name)
- Add the tooltip text into the data-tooltip value field
- Add the CSS below to the page or site
Can reposition utilizing the ‘bottom’ and ‘left’ properties.
/*Cornerstone Tooltips*/
.cs-tooltip {
overflow: visible;
}
.cs-tooltip::before {
content: attr(data-tooltip);
position: absolute;
bottom: 80%;
left: 0%;
padding: 6px 12px;
background-color: #000;
color: #fff;
font-size: 14px;
border-radius: 4px;
opacity: 0;
visibility: hidden;
white-space: nowrap;
transition: opacity 0.3s, visibility 0.3s;
z-index: 9999;
}
.cs-tooltip:hover::before {
opacity: 1;
visibility: visible;
}
Setup using a custom attribute
The final output