Internetstiftelsen Styleguide

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";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;

@include mixin.atom(tooltip) {
	position: relative;
	width: var.$icon-size;
	height: var.$icon-size;
	margin-right: func.rhythm(1);
	margin-left: func.rhythm(1);
	padding: func.rhythm(1);
	border-radius: 50%;
	box-shadow: 0 0 0 func.to_rem(5px) transparent;
	overflow: visible;

	&:focus,
	&:hover {
		overflow: visible;
		clip: auto;
		box-shadow: 0 0 0 func.to_rem(5px) colors.$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 bem.e(text) {
		display: block;
		position: absolute;
		z-index: func.z_index(foreground);
		top: auto;
		bottom: 130%;
		left: 50%;
		width: func.to_rem(300px);
		height: auto;
		margin: 0 0 func.to_rem(5px) 0;
		padding: func.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: var.$border-radius;
		opacity: 0;
		background-color: colors.$color-cyberspace;
		color: colors.$color-snow;
		font-family: var.$font-family-base;
		font-size: var.$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: colors.$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: colors.$color-cyberspace;
			}
		}
	}
}
  • URL: /components/raw/tooltip/_tooltip.scss
  • Filesystem Path: src/atoms/tooltip/_tooltip.scss
  • Size: 2.4 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.