Two ways to add a tooltip to a Pro Social element
Output of the above (left hand icon)
2. 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
Never done this one before so not sure if this is all semantically correct but sure looks pretty slick. 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; }
Output of the above CSS