Skip to content

Commit

Permalink
Added tooltip hover on social links
Browse files Browse the repository at this point in the history 
Signed-off-by: Ankush Bhardwaj <ankushbhardwaj408@gmail.com>
  • Loading branch information
@ankushbhardwaj408
ankushbhardwaj408 committed Oct 10, 2023
1 parent 63f485e commit b6e93fd
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 22 deletions.
82 changes: 65 additions & 17 deletions src/sections/Community/Member-single/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,7 @@ const MemberSingle = ({ frontmatter }) => {
/>
</Link>
</li>
<div className="tooltip-text meshery">
Meshery
</div>
<div className="tooltip-text meshery">Meshery</div>
</div>
)}
{badges.includes("smp") && (
Expand All @@ -107,9 +105,7 @@ const MemberSingle = ({ frontmatter }) => {
/>
</Link>
</li>
<span className="tooltip-text smp">
SMP
</span>
<span className="tooltip-text smp">SMP</span>
</div>
)}
{badges.includes("image-hub") && (
Expand All @@ -123,7 +119,9 @@ const MemberSingle = ({ frontmatter }) => {
/>
</Link>
</li>
<span className="tooltip-text image-hub">Image-hub</span>
<span className="tooltip-text image-hub">
Image-hub
</span>
</div>
)}
{badges.includes("landscape") && (
Expand All @@ -137,7 +135,9 @@ const MemberSingle = ({ frontmatter }) => {
/>
</Link>
</li>
<span className="tooltip-text landscape">Landscape</span>
<span className="tooltip-text landscape">
Landscape
</span>
</div>
)}
{badges.includes("community") && (
Expand All @@ -151,7 +151,9 @@ const MemberSingle = ({ frontmatter }) => {
/>
</Link>
</li>
<span className="tooltip-text community">Community</span>
<span className="tooltip-text community">
Community
</span>
</div>
)}
{badges.includes("docs") && (
Expand Down Expand Up @@ -225,7 +227,9 @@ const MemberSingle = ({ frontmatter }) => {
/>
</Link>
</li>
<span className="tooltip-text nighthawk">Nighthawk</span>
<span className="tooltip-text nighthawk">
Nighthawk
</span>
</div>
)}
{badges.includes("meshery-operator") && (
Expand Down Expand Up @@ -255,7 +259,9 @@ const MemberSingle = ({ frontmatter }) => {
/>
</Link>
</li>
<span className="tooltip-text patterns">Patterns</span>
<span className="tooltip-text patterns">
Patterns
</span>
</div>
)}
{badges.includes("ui-ux") && (
Expand Down Expand Up @@ -294,48 +300,90 @@ const MemberSingle = ({ frontmatter }) => {
<div className="social-bg">
<ul className="profile-social-links">
{executive_bio && (
<li>
<li className="tooltip">
<Link to="bio">
<FaUserTie className="bio" size={32} />
<span className="tooltiptext">Executive Bio</span>
</Link>
</li>
)}
{github && (
<li>
<li className="tooltip">
<a href={`https://github.com/${github}`}>
<FaGithub className="github" size={32} />
<span
className={`tooltiptext ${
github.length > 20
? "large-tooltip "
: `${
github.length > 10 && github.length <= 20
? "small-tooltip "
: "tooltiptext "
}`
} `}
>
{github}
</span>
</a>
</li>
)}
{twitter && (
<li>
<li className="tooltip">
<a href={`https://twitter.com/${twitter}`}>
<FaTwitter className="twitter" size={32} />
<span
className={`tooltiptext ${
twitter.length > 20
? "large-tooltip "
: `${
twitter.length > 10 && twitter.length <= 20
? "small-tooltip "
: "tooltiptext "
}`
} `}
>
{twitter}
</span>
</a>
</li>
)}
{linkedin && (
<li>
<li className="tooltip">
<a href={`https://Linkedin.com/in/${linkedin}`}>
<FaLinkedin className="linkedin" size={32} />
<span
className={`tooltiptext ${
linkedin.length > 20
? "large-tooltip "
: `${
linkedin.length > 10 && linkedin.length <= 20
? "small-tooltip "
: "tooltiptext "
}`
} `}
>
{linkedin}
</span>
</a>
</li>
)}
{layer5 && (
<li>
<li className="tooltip">
<a href={`https://meshery.layer5.io/user/${layer5}`}>
<img src={mesheryLogo} alt="meshery-icon"></img>
<span className="tooltiptext">Meshery</span>
</a>
</li>
)}
{meshmate && (
<li>
<li className="tooltip">
<Link to="/community/meshmates">
<img
src={MeshMateIcon}
className="meshmate-white"
alt="meshmate-icon"
/>
<span className="tooltiptext">Meshmate</span>
</Link>
</li>
)}
Expand Down
45 changes: 40 additions & 5 deletions src/sections/Community/Member-single/memberSingle.style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,12 +157,12 @@ export const MemberSingleWrapper = styled.div`
opacity: 0;
transition: opacity 0.3s; /* Add a smooth fade-in effect */
}
.mashmap{
width:90px;
.mashmap {
width: 90px;
}
.community{
left:30%;
width:100px;
.community {
left: 30%;
width: 100px;
}
.docker-extension {
left: -18%;
Expand Down Expand Up @@ -255,7 +255,42 @@ export const MemberSingleWrapper = styled.div`
font-weight: 700;
}
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
font-size: 14px;
visibility: hidden;
width: 100px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 2px;
position: absolute;
z-index: 1;
bottom: 115%; /* Position the tooltip above the list item */
left: 50%; /* Center the tooltip */
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .small-tooltip{
width:150px;
}
.tooltip .large-tooltip{
width:200px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.executive-bio {
margin: 4.5rem 0 3.125rem 0;
Expand Down

0 comments on commit b6e93fd

Please sign in to comment.