Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Gradient Tooltip #1313

Closed
wants to merge 17 commits into from
Closed

Added Gradient Tooltip #1313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
de84821
Added Gradient Tooltip
hars-21 Aug 1, 2024
a63720a
Added new Mario themed tootip
hars-21 Aug 1, 2024
3e16512
Merge branch 'Rakesh9100:main' into mario
hars-21 Aug 1, 2024
77ef0c4
Fixes
hars-21 Aug 1, 2024
3eaefd9
Merge branch 'mario' of https://github.com/hars-21/Beautiify into mario
hars-21 Aug 1, 2024
95f0581
Merge branch 'mario' of https://github.com/hars-21/Beautiify into mario
hars-21 Aug 3, 2024
b99a54c
Conflicts resolved
hars-21 Aug 3, 2024
02dab69
Merge branch 'gradient' of https://github.com/hars-21/Beautiify into …
hars-21 Aug 3, 2024
29ab014
Added gradient tooltip
hars-21 Aug 3, 2024
e067fd2
Added icon
hars-21 Aug 3, 2024
426fcda
Merge pull request #1 from hars-21/mario
hars-21 Aug 3, 2024
434c802
Mario tooltip merge
hars-21 Aug 3, 2024
a4a218f
Indentation fixed
hars-21 Aug 3, 2024
8bc345b
fixing tooltip indentation
hars-21 Aug 4, 2024
4fb8ffc
Update index.html
hars-21 Aug 5, 2024
95f9ab2
fix indentation
hars-21 Aug 9, 2024
6fe28c0
merge
hars-21 Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions Components/Tooltips/Gradient-Tooltip/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gradient Tooltip</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="/assets/images/favicon.png" type="image/x-icon" />
</head>

<body>
<div class="tooltip-container">
<span class="tooltip">Discover</span>
<span class="text">
<div class="borde-back">
<div class="icon">
<svg viewBox="0 0 16 16" class="bi bi-discord" height="23" width="23"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z">
</path>
</svg>
</div>
</div>
</span>
</div>
</body>

</html>
109 changes: 109 additions & 0 deletions Components/Tooltips/Gradient-Tooltip/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
margin: 0;
font-family: "Poppins", sans-serif;
}


.tooltip-container {
position: relative;
background-color: #ff3cac;
background-image: linear-gradient(225deg,
#ff3cac 0%,
#784ba0 50%,
#2b86c5 100%);
cursor: pointer;
transition: all 0.2s;
font-size: 17px;

width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
fill: #fff;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
}

.tooltip-container .borde-back {
width: 60px;
height: 60px;
background-color: #e8e8e8;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: none;
}

.tooltip-container .icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
background-color: #ff3cac;
background-image: linear-gradient(225deg,
#ff3cac 0%,
#784ba0 50%,
#2b86c5 100%);
cursor: pointer;
}

.tooltip {
position: absolute;
top: -2;
left: -45px;
transform: translateX(-32%);
width: 160px;
height: 52px;
opacity: 0;
pointer-events: none;
transition: all 0.6s;
border-radius: 50px;
background-color: #ff3cac;
background-image: linear-gradient(225deg,
#ff3cac 0%,
#784ba0 50%,
#2b86c5 100%);
display: flex;
align-items: center;
justify-content: right;
padding-right: 16px;
color: #fff;
font-size: 18px;
font-family: sans-serif;
font-weight: 800px;
}

.tooltip::before {
position: absolute;
content: "";
height: 0.6em;
width: 0.6em;
right: -0.2em;
top: 50%;
transform: translateY(-50%) rotate(45deg);
background: var(--background);
}

.tooltip-container:hover .tooltip {
left: 100%;
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: -10;
}

.tooltip-container:hover {
transform: translateX(-50px);
transition: 0.5s linear;
}
21 changes: 21 additions & 0 deletions Components/Tooltips/Mario-Themed-Tooltip/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mario Themed Tooltip</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="/assets/images/favicon.png" type="image/x-icon" />
</head>

<body>
<div class="brick one"></div>
<div class="tooltip-mario-container">
<div class="box"></div>
<div class="mush"></div>
</div>
<div class="brick two"></div>
</body>

</html>
Loading