<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."
}
@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;
}
}
}
}
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);
}
No notes defined.