Aug 9 2016 at 18:20

Scss mixin для создания tooltip указателя с рамочкой на CSS3

Invite pending

Периодически при разработке тех или иных ресурсов, мне приходилось сталкиваться с необходимостью создания tooltip. В интернете есть очень много различных примеров создания треугольников на чистом CSS. Вооружившись одним из таких примеров, я написал свой mixin, который создаёт из двух треугольников — tooltip указатель.

@mixin pointer($direction, $margin: 10px, $colors: (#999, $gray), $arrowSide: 8px, $isInset: false)

Описание аргументов

$direction — в какую сторону будет направлена стрелка. Принимаются значения: top, bottom, left, right.

$margin — отступ по грани, на которой размещён указатель. Для указателя с $direction top и bottom — отступ слева. Для left и right — отступ сверху.

$colors — массив. Первый аргумент — цвет рамки, второй аргумент — цвет фона указателя.

$arrowSide — относительный размер указателя.

$isInset — указатель смотрит наружу или вовнутрь.

Тут можно поэкспериментировать с mixin'ом и посмотреть пример использования.

//Общие правила для указателя
%pointer-core {
    content: " ";
    position: absolute;
    border: solid transparent;
}

@mixin pointer($direction, $margin: 10px, $colors: (#999, $gray), $arrowSide: 8px, $isInset: false){

    $opposites: (
        top: bottom,
        bottom: top,
        left: right,
        right: left
    );

    $margin-direction: (
        top: left,
        bottom: left,
        left: top,
        right: top
    );

    &:before {
        @extend %pointer-core;
        border-width: $arrowSide;

        @if $isInset {
            border-#{$direction}-color: nth($colors, 1);
            #{$direction}: -1px;
        }
        @else
        {
            border-#{map-get($opposites, $direction)}-color: nth($colors, 1);
            #{map-get($opposites, $direction)}: 100%;
        }

        #{map-get($margin-direction, $direction)}: 0;

        margin-#{map-get($margin-direction, $direction)}: $margin - 1;
    }

    &:after {
        @extend %pointer-core;
        border-width: $arrowSide - 1;

        @if $isInset {
            border-#{$direction}-color: nth($colors, 2);
            #{$direction}: -1px;
        }
        @else
        {
            border-#{map-get($opposites, $direction)}-color: nth($colors, 2);
            #{map-get($opposites, $direction)}: 100%;
        }

        #{map-get($margin-direction, $direction)}: 0;

        margin-#{map-get($margin-direction, $direction)}: $margin;
    }
}

Код вероятно не универсален, но я уверен, что вы легко сможете модифицировать его под свои нужды.

Tags:

Hubs: