Tooltip

There are no notes for this item.

<div style="padding: 80px 50px">
    <p><a href="#" data-tooltip="I'm the tooltip" class="button">I'm a link with a tooltip</a></p>

    <p><button data-tooltip="I'm the tooltip" class="button">I'm a button with a tooltip</button></p>
</div>
/* No context defined for this component. */
  • Content:
    [data-tooltip] {
    	position: relative;
    	cursor: pointer;
    }
    
    [data-tooltip]:before,
    [data-tooltip]:after {
    	position: absolute;
    	visibility: hidden;
    	opacity: 0;
    	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    	transform: translate3d(0, 0, 0);
    	pointer-events: none;
    	bottom: 100%;
    	left: 50%;
    }
    
    [data-tooltip]:before {
    	z-index: 1001;
    	border: 6px solid transparent;
    	background: transparent;
    	content: "";
    	margin-left: -6px;
    	margin-bottom: -12px;
    	border-top-color: #000;
    	border-top-color: hsla(0, 0%, 0%, 0.75);
    }
    
    [data-tooltip]:after {
    	z-index: 1000;
    	padding: 0.5rem;
    	width: 180px;
    	background-color: #000;
    	background-color: hsla(0, 0%, 0%, 0.75);
    	color: #fff;
    	content: attr(data-tooltip);
    	font-size: 0.8rem;
    	line-height: 1.3;
    	font-weight: 700;
    	margin-left: -90px;
    	border-radius: $radius;
    }
    
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after,
    [data-tooltip]:focus:before,
    [data-tooltip]:focus:after {
    	visibility: visible;
    	opacity: 1;
    	transform: translateY(-10px);
    }
    
  • URL: /components/raw/tooltip/tooltip.scss
  • Filesystem Path: components/02-components/tooltip/tooltip.scss
  • Size: 1.1 KB