,

Impress Your Visitors with this Social Sharing Tooltip (React & Tailwind)

Posted by

Social Sharing Tooltip

.tooltip {
position: relative;
display: inline-block;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #000;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

This Social Sharing Tooltip will Impress your Visitors (React & Tailwind)

Share this article with your friends:

Share




const App = () => {
return (

This Social Sharing Tooltip will Impress your Visitors (React & Tailwind)

Share this article with your friends:

Share




);
};

ReactDOM.render(, document.getElementById(‘root’));

0 0 votes
Article Rating
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@colbyfayock
8 months ago

Get fresh tutorials and other free content straight to your inbox! https://colbyfayock.com/news

@leonardocitton4627
8 months ago

Thanks Colby, I needed this video ❤

@MightNight892
8 months ago

Outstanding as always

@collectitbydiyversity2442
8 months ago

great video. I'm creating a Chrome extension and would like to add this feature for users to access on any website/page they go on.
I've seen it being done with other chrome extensions I use. How can this be implemented in the code?

@MyGeorge1964
8 months ago

Thank v. much… V. useful bit of code.

@iplaxtech
8 months ago

Thanks for sharing, it's very useful 🙂

@scottfwalter
8 months ago

Please don’t. I find that feature the most annoying part of Medium. I want to just use native copy functionality.