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

func Warp.Tooltip(
            title: String,
            arrowEdge: Edge = .top
        )

Warp.Tooltip(title: "This is a Tooltip")

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

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

Legacy support

Coming soon

Parameters

Required props

name	type	default	notes
title	String		The text to be displayed

Optional Props

name	type	default	notes
arrowEdge	Edge.top Edge.leading Edge.bottom Edge.trailing	Edge.top	The direction of the arrow