benivo-ui-library/tooltip.less

Benivo UI library

// @tooltip-border-color: rgba(79, 90, 101, 0.27);
// @tooltip-bg: @white;
@tooltip-border: solid 0.5px var(--border-200);
@tooltip-box-shadow: 0 1px 4px 0 rgba(79, 90, 101, 0.3);
@tooltip-font-size: @extra-small-font-size;
@tooltip-arrow-width: 12px;

.tooltip {
    background: var(--white);
    border: @tooltip-border;
    font-size: @tooltip-font-size;
    font-weight: @font-weight-normal;
    font-family: @font-family;
    width: 210px;
    position: absolute;
    z-index: @zindex-tooltip;
    .border-radius(@border-radius);
    .box-shadow (@tooltip-box-shadow);
    visibility: hidden;
    opacity: 0;
    transition:
        visibility 0.35s,
        opacity 0.35s ease-in-out;
    line-height: 1.5;

    &.tooltip-with-triangle {
        top: 50%;
        padding: @spacer;

        .tooltip-inner {
            position: relative;
            background: var(--white);
            .border-radius(@border-radius);

            .triangle-box {
                position: absolute;
                top: -17px;

                .triangle-with-shadow {
                    width: 40px;
                    height: 40px;
                    position: relative;
                    overflow: hidden;

                    &:before,
                    &:after {
                        content: '';
                        position: absolute;
                        width: 31px;
                        height: 85px;
                        background: var(--white);
                        border: @tooltip-border;
                    }

                    &:before {
                        transform: rotate(90deg);
                        top: -57px;
                        z-index: 2;
                    }

                    &:after {
                        top: -34px;
                        .box-shadow (@tooltip-box-shadow);
                        z-index: 1;
                    }
                }
            }
        }

        &.tooltip-left {
            right: ~'calc(100% + 40px)';
            .border-radius(@border-radius 0 @border-radius @border-radius);

            .tooltip-inner {
                position: relative;

                .triangle-box {
                    right: -55px;

                    .triangle-with-shadow {
                        &:before {
                            left: -37px;
                        }

                        &:after {
                            transform: rotate(38deg);
                            left: -19px;
                        }
                    }
                }
            }
        }

        &.tooltip-right {
            .border-radius(0 @border-radius @border-radius @border-radius);
            left: ~'calc(100% + 40px)';
            right: unset;

            .tooltip-inner {
                .triangle-box {
                    left: -55px;

                    .triangle-with-shadow {
                        &:before {
                            left: 42px;
                        }

                        &:after {
                            transform: rotate(142deg);
                            left: 26px;
                        }
                    }
                }
            }
        }
    }

    &.tooltip-standard {
        padding: 0;

        .tooltip-inner {
            padding: 0.375rem 0.55rem;
            background: var(--white);
            .border-radius(@border-radius);
            text-align: center;

            &:after {
                content: '';
                display: block;
                width: @tooltip-arrow-width;
                height: @tooltip-arrow-width;
                position: absolute;
                background-color: var(--white);
                .box-shadow(-1px -1px 0 var(--border-200));
            }
        }

        &.tooltip-right,
        &.tooltip-left {
            &.arrow-center {
                top: 50%;
                transform: translate(0, -50%);

                .tooltip-inner {
                    &:after {
                        top: 50%;
                        margin-top:~'calc(-@{tooltip-arrow-width}/2)';
                    }
                }
            }

            &.arrow-top {
                top: 0;

                .tooltip-inner {
                    &:after {
                        top: @tooltip-arrow-width;
                    }
                }
            }

            &.arrow-bottom {
                bottom: 0;

                .tooltip-inner {
                    &:after {
                        bottom: @tooltip-arrow-width;
                    }
                }
            }
        }

        &.tooltip-right {
            left:~'calc(100% + @{tooltip-arrow-width})';

            .tooltip-inner {
                &:after {
                    left:~'calc(-@{tooltip-arrow-width}/2)';
                    .transform(rotate(-45deg));
                }
            }
        }

        &.tooltip-left {
            right:~'calc(100% + @{tooltip-arrow-width})';

            &.input-tooltip {
                right: 40px;
            }

            .tooltip-inner {
                &:after {
                    right:~'calc(-@{tooltip-arrow-width}/2)';
                    .transform(rotate(135deg));
                }
            }
        }

        &.tooltip-top,
        &.tooltip-bottom {
            &.arrow-center {
                left: 50%;
                transform: translate(-50%, 0);

                .tooltip-inner {
                    &:after {
                        left: 50%;
                        margin-left:~'calc(-@{tooltip-arrow-width}/2)';
                    }
                }
            }

            &.arrow-left {
                left:~'calc(-50% - (@{tooltip-arrow-width}/2)/2)'; // Take the width on the arrow side

                .tooltip-inner {
                    &:after {
                        left: @tooltip-arrow-width;
                    }
                }
            }

            &.arrow-right {
                right: 0;

                .tooltip-inner {
                    &:after {
                        right: @tooltip-arrow-width;
                    }
                }
            }
        }

        &.tooltip-top {
            bottom:~'calc(100% + @{tooltip-arrow-width})';

            .tooltip-inner {
                &:after {
                    .transform(rotate(-135deg));
                    bottom:~'calc(-@{tooltip-arrow-width}/2)';
                }
            }
        }

        &.tooltip-bottom {
            top:~'calc(100% + @{tooltip-arrow-width})';

            .tooltip-inner {
                &:after {
                    .transform(rotate(45deg));
                    top:~'calc(-@{tooltip-arrow-width}/2)';
                }
            }
        }
    }
}

.has-tooltip {
    display: inline-block;
    position: relative;
    cursor: pointer;

    &.locked {
        .info {
            display: none;
        }

        &:hover {
            .tooltip {
                visibility: visible;
                opacity: 1;
            }
        }
    }

    &:hover {
        .tooltip {
            visibility: visible;
            opacity: 1;
        }
    }
}