Tooltip

<div class="row no-gutters align-items-center">
    <div class="grid-auto">
        <input class="a-input" type="text" placeholder="Adress" aria-describedby="tooltip" />
    </div>
    <div class="grid-auto display-flex align-items-center">
        <span tabindex="0" class="a-tooltip a-button a-button--standalone-icon a-button--icon" id="tooltip" role="tooltip">
            <span class="a-tooltip__text" data-tooltip>Ett .se-domännamn kan registreras för en period mellan 12-120 månader. Efter att ett domännamn förfallit kommer den att få statusen “Expired” i tio dagar. Om domänen inte förnyas under dessa tio dagar ändras statusen på domänen till “Deactivated”, vilket innebär att den inte kommer med i zonfilen. Domänen är därefter deaktiverad i 60 dagar om ingen förnyelse sker. Under deaktiveringsperioden har du möjlighet att förnya domänen.</span>
            <svg class="icon a-button__icon">
                <use xlink:href="#icon-link"></use>
            </svg>
        </span>
    </div>
</div>
<div class="row no-gutters align-items-center">
	<div class="grid-auto">
		<input class="a-input" type="text" placeholder="Adress" aria-describedby="tooltip" />
	</div>
	<div class="grid-auto display-flex align-items-center">
		<span tabindex="0" class="a-tooltip a-button a-button--standalone-icon a-button--icon" id="tooltip" role="tooltip">
			<span class="a-tooltip__text" data-tooltip>{{{text}}}</span>
			<svg class="icon a-button__icon">
				<use xlink:href="#icon-link"></use>
			</svg>
		</span>
	</div>
</div>
{
  "name": "Tooltip",
  "text": "Ett .se-domännamn kan registreras för en period mellan 12-120 månader. Efter att ett domännamn förfallit kommer den att få statusen “Expired” i tio dagar. Om domänen inte förnyas under dessa tio dagar ändras statusen på domänen till “Deactivated”, vilket innebär att den inte kommer med i zonfilen. Domänen är därefter deaktiverad i 60 dagar om ingen förnyelse sker. Under deaktiveringsperioden har du möjlighet att förnya domänen."
}
  • Content:
    @charset 'UTF-8';
    
    @include atom(tooltip) {
    	position: relative;
    	width: $icon-size;
    	height: $icon-size;
    	margin-right: rhythm(1);
    	margin-left: rhythm(1);
    	padding: rhythm(1);
    	border-radius: 50%;
    	box-shadow: 0 0 0 rem(5px) transparent;
    	overflow: visible;
    
    	&:focus,
    	&:hover {
    		overflow: visible;
    		clip: auto;
    		box-shadow: 0 0 0 rem(5px) $color-ocean-light;
    
    		[class*='text'] {
    			overflow: visible;
    			clip: auto;
    			transform: rotateX(0deg) scale(1) translateX(-50%);
    			opacity: 1;
    		}
    	}
    
    	[class*='icon'] {
    		position: absolute;
    		top: 50%;
    		left: 50%;
    		overflow: visible;
    		transform: translateX(-50%) translateY(-50%);
    		transition: box-shadow 0.3s cubic-bezier(0.3, 0, 0, 1);
    		color: var(--cyberspace-color);
    		fill: currentColor;
    	}
    
    	@include e(text) {
    		display: block;
    		position: absolute;
    		z-index: z_index(foreground);
    		top: auto;
    		bottom: 130%;
    		left: 50%;
    		width: rem(300px);
    		height: auto;
    		margin: 0 0 rem(5px) 0;
    		padding: rhythm(1);
    		transform: rotateX(90deg) scale(0.2) translateX(-100%);
    		transform-origin: bottom center;
    		-webkit-backface-visibility: hidden;
    		transition: transform 0.3s cubic-bezier(0.3, 0, 0, 1);
    		border-radius: $border-radius;
    		opacity: 0;
    		background-color: $color-cyberspace;
    		color: $color-snow;
    		font-family: $font-family-base;
    		font-size: $size-small;
    		text-align: left;
    		user-select: none;
    
    		&::after {
    			content: ' ';
    			position: absolute;
    			top: calc(100% - 1px);
    			bottom: auto;
    			left: 50%;
    			width: 0;
    			height: 0;
    			margin-left: -15px;
    			border: solid transparent;
    			border-width: 15px;
    			border-color: rgba(31, 42, 54, 0);
    			border-top-color: $color-cyberspace;
    			border-bottom-color: transparent;
    			pointer-events: none;
    		}
    
    		&.down {
    			top: 130%;
    			bottom: auto;
    			transform-origin: top center;
    
    			&::after {
    				top: auto;
    				bottom: calc(100% - 1px);
    				border-top-color: transparent;
    				border-bottom-color: $color-cyberspace;
    			}
    		}
    	}
    }
    
  • URL: /components/raw/tooltip/_tooltip.scss
  • Filesystem Path: src/atoms/tooltip/_tooltip.scss
  • Size: 2 KB
  • Content:
    const toolTip = document.querySelector('[role="tooltip"]');
    const toolTipText = document.querySelector('[data-tooltip]');
    
    function isInViewport(elem) {
    	const distance = elem.getBoundingClientRect();
    	return (
    		distance.top >= 30
    		&& distance.left >= 30
    		&& distance.bottom <= (window.innerHeight || document.documentElement.clientHeight)
    		&& distance.right <= (window.innerWidth || document.documentElement.clientWidth)
    	);
    }
    
    function positionToolTip() {
    	if (isInViewport(toolTip)) {
    		toolTipText.classList.remove('down');
    	} else {
    		toolTipText.classList.add('down');
    	}
    }
    
    if (toolTip) {
    	positionToolTip();
    	window.addEventListener('scroll', positionToolTip);
    }
    
  • URL: /components/raw/tooltip/tooltip.js
  • Filesystem Path: src/atoms/tooltip/tooltip.js
  • Size: 675 Bytes

No notes defined.