Swegon Component Library

Tooltip 

<div class="tooltip">
    <div class="tooltip__content">
        Lorem ipsum dolor sit amet, consectetur elit. Sed do ut adipiscing eiusmod tempor incididunt.
        <div class="tooltip__arrow"></div>
    </div>
</div>
 
<div class="tooltip">
    <div class="tooltip__content">
        {{ description }}
        <div class="tooltip__arrow"></div>
    </div>
</div>
 
{
  "description": "Lorem ipsum dolor sit amet, consectetur elit. Sed do ut adipiscing eiusmod tempor incididunt."
}
  • Content: 
    import { computePosition, offset, flip, shift, arrow } from '@floating-ui/dom';

const Tooltip = (el) => {
    const tooltip = el.querySelector('.tooltip');
    const tooltipContent = el.querySelector('.tooltip__content');
    const tooltipArrow = el.querySelector('.tooltip__arrow');

    const handleTooltipPosition = () => {
        computePosition(el, tooltipContent, {
            placement: 'top',
            middleware: [offset(14), flip(), shift({ padding: 5 }), arrow({ element: tooltipArrow })]
        }).then(({ x, y, placement, middlewareData }) => {
            const { x: arrowX, y: arrowY } = middlewareData.arrow;
            const staticSide = {
                top: 'bottom',
                right: 'left',
                bottom: 'top',
                left: 'right'
            }[placement.split('-')[0]];

            Object.assign(tooltipContent.style, {
                left: `${x}px`,
                top: `${y}px`
            });

            Object.assign(tooltipArrow.style, {
                left: arrowX != null ? `${arrowX}px` : '',
                top: arrowY != null ? `${arrowY}px` : '',
                right: '',
                bottom: '',
                [staticSide]: '-10px'
            });

            placement === 'bottom'
                ? el.classList.add(`tooltip--align-bottom`)
                : el.classList.remove(`tooltip--align-bottom`);
        });
    };

    const show = () => {
        tooltip.classList.add('tooltip--visible');
        handleTooltipPosition();
    };

    const hide = () => {
        tooltip.classList.remove('tooltip--visible');
    };

    const addEventListeners = () => {
        el.addEventListener('mouseenter', show);
        el.addEventListener('mouseleave', hide);
    };

    addEventListeners();
};

export default Tooltip;
  • URL: /components/raw/tooltip/Tooltip.js
  • Filesystem Path: src/components/tooltip/Tooltip.js
  • Size: 1.8 KB
  • Content: 
    import Tooltip from './Tooltip.js';
import isTouchScreenDevice from '../../functions/isTouchScreenDevice';
const els = document.querySelectorAll('.js-tooltip');

for (let el of els) {
    if (!isTouchScreenDevice()) {
        new Tooltip(el);
    }
}
  • URL: /components/raw/tooltip/index.js
  • Filesystem Path: src/components/tooltip/index.js
  • Size: 251 Bytes
  • Content: 
    .tooltip {
    position: relative;
    z-index: 1;

    &__content {
        display: none;
        position: absolute;
        width: size(40); // 320px
        background: $color-white;
        padding: $size-32 $size-24;
        padding: $size-16;
        box-shadow: 0px 0px 3px 0 rgba($color-black, 0.2);
        font-size: $size-14;
        line-height: $size-20;

        .tooltip--visible & {
            display: block;
        }
    }

    &__arrow {
        position: absolute;
        width: $size-12;
        height: $size-12;

        &:before {
            content: ' ';
            position: absolute;
            bottom: -$size-14;
            border: solid transparent;
            border-top-color: $color-white;
            border-width: $size-12;
            margin-left: -6px;

            .tooltip--align-bottom & {
                border: transparent solid;
                border-width: $size-12;
                border-bottom-color: $color-white;
                bottom: auto;
                top: -$size-14;
            }
        }

        &:after {
            content: ' ';
            position: absolute;
            bottom: 2px;
            width: $size-16;
            height: $size-16;
            transform: rotate(-45deg);
            margin-left: -2px;
            box-shadow: -1px 1px 1px 0 rgba($color-black, 0.12);

            .tooltip--align-bottom & {
                transform: rotate(-225deg);
                top: 0;
                bottom: auto;
            }
        }
    }
}
  • URL: /components/raw/tooltip/tooltip.scss
  • Filesystem Path: src/components/tooltip/tooltip.scss
  • Size: 1.5 KB

No notes defined.