How to add a tooltip to a social element

Hello,

I’ve trawled the forum, but can’t find a way to add a tooltip to a social element. I’m using a (i) icon and a triangle warning icon. It seems that we can still use shortcodes but it seems a high price to pay to lose having the Social element in the document hierarchy.

Is it shortcodes or nothing?

Thanks, Bill

Hello Bill,

Thanks for writing in! The Social element only displays an icon. There is no feature to display a tooltip. Are you trying to use a similar function of the Classic Social Sharing element?

You can go to Cornerstone > Settings > Permissions > Administrator > Elements and make sure to enable all classic elements.

Best Regards.

Errm, I’m not trying to share anything, I have an icon for which I’d like to display a tooltip on hover. With the Social element. I will ask in the Facebook group, maybe they know a way.

Best wishes, Bill.

Hi Bill,

You can add the title attribute to the Icon element from Customize > Custom Attribute which will show the tooltip.

Screenshot 2023-05-26 152726

Hope it helps.
Thanks

Thanks @tristup, here’s a summary for the future of two methods to add a tooltip to a Social element. Your method does work, the second method gives you more control over the styling.

Hi Bill,

Glad that we are able to guide you and thanks for sharing it with others.

Second method using CSS and custom attributes

  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)
  3. Add the tooltip text into the data-tooltip value field
  4. 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

Hi Bill,

Glad that you explained it.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.