Two ways to add a tooltip to a Pro Social element

Method 1 - Title Attribute

  1. Go to element → customise
  2. Add a custom attribute
    1. name = “title”
    2. Value = “tooltip text”

Untitled

Output of the above (left hand icon)

Untitled

Method 2 - Class with CSS

  1. Add the class "cs-tooltip" to your social element (or any element for that matter)

2. Add the custom attribute "data-tooltip" to your element (the name)

  1. Add the tooltip text into the data-tooltip value field

  2. 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; }

Untitled

Output of the above CSS

Untitled