Rengga Dev – A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element.
/* You want a simple and fancy tooltip? Just copy all [data-tooltip] blocks: */ [data-tooltip] { --arrow-size: 5px; position: relative; z-index: 10; } /* Positioning and visibility settings of the tooltip */ [data-tooltip]:before, [data-tooltip]:after { position: absolute; visibility: hidden; opacity: 0; left: 50%; bottom: calc(100% + var(--arrow-size)); pointer-events: none; transition: 0.2s; will-change: transform; } /* The actual tooltip with a dynamic width */ [data-tooltip]:before { content: attr(data-tooltip); padding: 10px 18px; min-width: 50px; max-width: 300px; width: max-content; width: -moz-max-content; border-radius: 6px; font-size: 14px; background-color: rgba(59, 72, 80, 0.9); background-image: linear-gradient(30deg, rgba(59, 72, 80, 0.44), rgba(59, 68, 75, 0.44), rgba(60, 82, 88, 0.44)); box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2); color: #fff; text-align: center; white-space: pre-wrap; transform: translate(-50%, calc(0px - var(--arrow-size))) scale(0.5); } /* Tooltip arrow */ [data-tooltip]:after { content: ''; border-style: solid; border-width: var(--arrow-size) var(--arrow-size) 0px var(--arrow-size); /* CSS triangle */ border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent; transition-duration: 0s; /* If the mouse leaves the element, the transition effects for the tooltip arrow are "turned off" */ transform-origin: top; /* Orientation setting for the slide-down effect */ transform: translateX(-50%) scaleY(0); } /* Tooltip becomes visible at hover */ [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; opacity: 1; } /* Scales from 0.5 to 1 -> grow effect */ [data-tooltip]:hover:before { transition-delay: 0.3s; transform: translate(-50%, calc(0px - var(--arrow-size))) scale(1); } /* Arrow slide down effect only on mouseenter (NOT on mouseleave) */ [data-tooltip]:hover:after { transition-delay: 0.5s; /* Starting after the grow effect */ transition-duration: 0.2s; transform: translateX(-50%) scaleY(1); } /* That's it for the basic tooltip. If you want some adjustability here are some orientation settings you can use: */ /* LEFT */ /* Tooltip + arrow */ [data-tooltip-location="left"]:before, [data-tooltip-location="left"]:after { left: auto; right: calc(100% + var(--arrow-size)); bottom: 50%; } /* Tooltip */ [data-tooltip-location="left"]:before { transform: translate(calc(0px - var(--arrow-size)), 50%) scale(0.5); } [data-tooltip-location="left"]:hover:before { transform: translate(calc(0px - var(--arrow-size)), 50%) scale(1); } /* Arrow */ [data-tooltip-location="left"]:after { border-width: var(--arrow-size) 0px var(--arrow-size) var(--arrow-size); border-color: transparent transparent transparent rgba(55, 64, 70, 0.9); transform-origin: left; transform: translateY(50%) scaleX(0); } [data-tooltip-location="left"]:hover:after { transform: translateY(50%) scaleX(1); } /* RIGHT */ [data-tooltip-location="right"]:before, [data-tooltip-location="right"]:after { left: calc(100% + var(--arrow-size)); bottom: 50%; } [data-tooltip-location="right"]:before { transform: translate(var(--arrow-size), 50%) scale(0.5); } [data-tooltip-location="right"]:hover:before { transform: translate(var(--arrow-size), 50%) scale(1); } [data-tooltip-location="right"]:after { border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0px; border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent; transform-origin: right; transform: translateY(50%) scaleX(0); } [data-tooltip-location="right"]:hover:after { transform: translateY(50%) scaleX(1); } /* BOTTOM */ [data-tooltip-location="bottom"]:before, [data-tooltip-location="bottom"]:after { top: calc(100% + var(--arrow-size)); bottom: auto; } [data-tooltip-location="bottom"]:before { transform: translate(-50%, var(--arrow-size)) scale(0.5); } [data-tooltip-location="bottom"]:hover:before { transform: translate(-50%, var(--arrow-size)) scale(1); } [data-tooltip-location="bottom"]:after { border-width: 0px var(--arrow-size) var(--arrow-size) var(--arrow-size); border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent; transform-origin: bottom; } [data-tooltip]:after { bottom: calc(100% + 3px); } [data-tooltip]:after { border-width: 7px 7px 0px 7px; } }
.iconscontainer { position: relative; margin: 0 5em; display: flex; align-items: center; height: 100%; .icon { position: relative; display: flex; width: 150px; height: 150px; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; border-radius: 50%; background-color: #fff; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.07); .fa-github { font-size: 4rem; background-image: linear-gradient( 375deg, rgb(28, 199, 208), rgb(46, 222, 152) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } span { position: absolute; top: 60%; margin-top: 10px; padding: .55rem 1rem; font-size: 1rem; font-weight: 500; white-space: nowrap; color: #000; border-radius: 50px; background-color: #fff; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0; transition: all 0.2s ease-in-out; } &:hover { span { top: 100%; opacity: 0.9; } } } }