tooltips
Facebook Profile Tooltip
라이브 미리보기새 탭에서 열기 ↗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>facebook-profile-tooltip</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tooltip-container">
<div class="tooltip">
<div class="profile">
<div class="user">
<div class="img">Fb</div>
<div class="details">
<div class="name">User</div>
<div class="username">@username</div>
</div>
</div>
<div class="about">500+ Friends</div>
</div>
</div>
<div class="text">
<a class="icon" href="#">
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="facebookSVG">
<svg
viewBox="0 0 40 40"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
>
<linearGradient
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(40 0 0 -39.7778 11115.001 16212.334)"
y2="407.5726"
y1="406.6018"
x2="-277.375"
x1="-277.375"
id="a"
>
<stop stop-color="#0062e0" offset="0"></stop>
<stop stop-color="#19afff" offset="1"></stop>
</linearGradient>
<path
d="M16.7 39.8C7.2 38.1 0 29.9 0 20 0 9 9 0 20 0s20 9 20 20c0 9.9-7.2 18.1-16.7 19.8l-1.1-.9h-4.4l-1.1.9z"
fill="url(#a)"
></path>
<path
d="m27.8 25.6.9-5.6h-5.3v-3.9c0-1.6.6-2.8 3-2.8H29V8.2c-1.4-.2-3-.4-4.4-.4-4.6 0-7.8 2.8-7.8 7.8V20h-5v5.6h5v14.1c1.1.2 2.2.3 3.3.3 1.1 0 2.2-.1 3.3-.3V25.6h4.4z"
fill="#fff"
></path>
</svg>
</span>
</div>
<div class="text">Facebook</div>
</a>
</div>
</div>
</body>
</html>