# Tooltips

Magento UI library provides 4 tooltip types:

      top
      bottom
      left
      right

Lorem Ipsum is simply <span class="example-tooltip-bottom"><a href="#" aria-describedby="tooltip-1">dummy</a><span class="tooltip-content" id="tooltip-1" role="tooltip">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span></span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a <span class="example-tooltip-left"><a href="#" aria-describedby="tooltip-2">galley</a><span class="tooltip-content" id="tooltip-2" role="tooltip">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span></span> of type and scrambled it to make a type specimen book. It has survived <span class="example-tooltip-right"><a href="#" aria-describedby="tooltip-3">not</a><span class="tooltip-content" id="tooltip-3" role="tooltip">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span></span> only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing <span class="example-tooltip-top"><a href="#" aria-describedby="tooltip-4">software</a><span class="tooltip-content" id="tooltip-4" role="tooltip">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span></span> like Aldus PageMaker including versions of Lorem Ipsum.

    .example-tooltip-bottom {
        .lib-tooltip(bottom);
    }

    .example-tooltip-left {
        .lib-tooltip(left);
    }

    .example-tooltip-right {
        .lib-tooltip(right);
    }

    .example-tooltip-top {
        .lib-tooltip(top);
    }

# Tooltips variables

                Mixin variable
                Global variable
                Default value
                Allowed values
                Comment

                @_tooltip-position
                -
                top
                top | right | bottom | left
                Side of the element tooltip is displayed on

                @_tooltip-selector-toggle
                -
                ~".tooltip-toggle"
                '' | false | value
                The class name of the element that toggles tooltip

                @_tooltip-selector-content
                -
                ~".tooltip-content"
                '' | false | value
                The tooltip content class name

                @_tooltip-background
                @tooltip__background
                @color-white
                '' | false | value
                Tooltip background color

                @_tooltip-border-color
                @tooltip__border-color
                #bbb
                '' | false | value
                Tooltip border color

                @_tooltip-border-width
                @tooltip__border-width
                1px
                '' | false | value
                Tooltip border width

                @_tooltip-border-radius
                @tooltip__border-radius
                false
                '' | false | value
                Tooltip border radius

                @_tooltip-color
                @tooltip__color
                @primary__color
                '' | false | value
                Tooltip text color

                @_tooltip-cursor
                @tooltip__cursor
                help
                '' | false | value
                Tooltip cursor

                @_tooltip-font-size
                @tooltip__font-size
                false
                '' | false | value
                Tooltip font size

                @_tooltip-font-family
                @tooltip__font-family
                false
                '' | false | value
                Tooltip font family

                @_tooltip-font-weight
                @tooltip__font-weight
                false
                '' | false | value
                Tooltip font weight

                @_tooltip-font-style
                @tooltip__font-style
                false
                '' | false | value
                Tooltip font style

                @_tooltip-line-height
                @tooltip__line-height
                1.4
                '' | false | value
                Tooltip line height

                @_tooltip-margin
                @tooltip__margin
                false
                '' | false | value
                Tooltip margin

                @_tooltip-padding
                @tooltip__padding
                12px 16px
                '' | false | value
                Tooltip padding

                @_tooltip-min-width
                @tooltip__min-width
                210px
                '' | false | value
                Tooltip minimal width

                @_tooltip-max-width
                @tooltip__max-width
                360px
                '' | false | value
                Tooltip maximal width

                @_tooltip-arrow-size
                @tooltip-arrow__size
                5px
                '' | false | value
                Tooltip arrow size

                @_tooltip-arrow-offset
                @tooltip-arrow__offset
                10px
                '' | false | value
                Tooltip arrow offset

                @_tooltip-z-index
                @tooltip__z-index
                100
                '' | false | value
                Tooltip z-index