Warp Design System

Appearance

Tooltip ​

A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element. Tooltips should be used sparingly and contain succinct, supplementary information.

iOS only

For the web implementation of a "tooltip", see Components - Attention - Tooltip.

React

unsupported

Vue

unsupported

Elements

unsupported

Android

unsupported

iOS

released

Example ​

Usage ​

Design Guidelines ​

See Figma: Warp - Components / Tooltip

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #nmp-warp-design-system

iOS implementation ​

Syntax ​

swift
func Warp.Tooltip(
            title: String,
            arrowEdge: Edge = .top
        )
swift
Warp.Tooltip(title: "This is a Tooltip")

There are a variety of positions supported for the Tooltip component:

swift
public enum Edge {
    case top
    case leading
    case bottom
    case trailing
}

Legacy support ​

Coming soon

Parameters ​

Required props

nametypedefaultnotes

title

String

The text to be displayed

Optional Props

nametypedefaultnotes

arrowEdge

Edge.top
Edge.leading
Edge.bottom
Edge.trailing

Edge.top

The direction of the arrow