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 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
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.