Preview

Code

                                                        
                                                        
                                                                <usln-tooltip
                                                                header="Tooltip header"
                                                                text="More info about the targeted element"
                                                                placement="top"
                                                                offset="8"
                                                                theme="light"
                                                                delay="100"
                                                                disabled="false"
                                                                fade-duration="300"
                                                            >
                                                                <div>Element which the tooltip is attached to</div>
                                                            </usln-tooltip>
                                                        
                                                            

Guidelines

Tooltips are used to display contextual information to the user. They do not force the user to act upon it like a modal, they are merely available for quick information or linked access to another object.

• Tooltips generally do not have rich text formatting except maybe bold or italics in exception cases. In our exception, segmentations would be one of the exceptional use cases.
• Tooltips are accessible only on action elements, like buttons, form fields, etc; a.k.a natively focusable HTML element.
• Tooltips are generally not meant for touch screens. So use tooltips to describe additional context but not important information that should be known to the users.

Behaviours

A tooltip displays short sentences related to an element on mouse hover or focused via keyboard on that element.

When a tooltip is triggered, then it is dismissed when it no longer has focus (onBlur). If the tooltip is invoked with mouseIn, then it is dismissed with on mouseOut.

Standard delay we use for displaying a tooltip on hover is 500ms, but it is optional and can be adjusted as needed (eg. some infotips in Analytics are shown instantly).

Placement

Placement at the top

Placement on the right

Placement at the bottom start

By default a tooltip are positioned in relation to its target. It's an automatic placement, similar to what we have for the Userlane hints.

If there is a specific placement required, override the default placement.

Do's and dont's