Tooltips

Magento UI library provides 4 tooltip types:

  top
  bottom
  left
  right
.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 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 classname of the element that toggles tooltip
@_tooltip-selector-toggle ~".tooltip-content" '' | false | value The tooltip content classname
@_tooltip-background @color-white '' | false | value Tooltip background color
@_tooltip-border-color #bbb '' | false | value Tooltip border color
@_tooltip-border-width 1px '' | false | value Tooltip border width
@_tooltip-border-radius false '' | false | value Tooltip border radius
@_tooltip-color @primary__color '' | false | value Tooltip text color
@_tooltip-cursor help '' | false | value Tooltip cursor
@_tooltip-font-size false '' | false | value Tooltip font size
@_tooltip-font-family false '' | false | value Tooltip font family
@_tooltip-font-weight false '' | false | value Tooltip font weight
@_tooltip-font-style false '' | false | value Tooltip font style
@_tooltip-line-height 1.4 '' | false | value Tooltip line height
@_tooltip-margin false '' | false | value Tooltip margin
@_tooltip-padding 12px 16px '' | false | value Tooltip padding
@_tooltip-min-width 210px '' | false | value Tooltip minimal width
@_tooltip-max-width 360px '' | false | value Tooltip maximal width
@_tooltip-arrow-size 5px '' | false | value Tooltip arrow size
@_tooltip-arrow-offset 10px '' | false | value Tooltip arrow offset
@_tooltip-z-index 100 '' | false | value Tooltip z-index