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

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