How to add a tooltip to a social element

[bill_hodgson]

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

[ruenel]

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.

[bill_hodgson]

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.

[tristup]

Hi Bill,

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

Hope it helps.
Thanks

[bill_hodgson]

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.

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

[tristup]

Hi Bill,

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

[bill_hodgson]

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

[tristup]

Hi Bill,

Glad that you explained it.