Skip to main content

Components

Tooltip

Shows additional context on tap or hover.

banner-Tooltip
Square Icon

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Tooltip displays informative text when users hover, focus, or click an element.

Use Legion Tooltip styles allow users to type text into an app, with support lots type and attribute to customize.

import LegionUI

Variant

LGNTooltip with the following appearances:

  1. Tooltip
  2. Tooltip icon
  3. Tooltip + arrow position: no arrow, bottom center, bottom left, bottom right, top center, left, right
  4. Tooltip icon + arrow position: no arrow, left, right, bottom, top left, top right, top arrow, top no arrow

You can change the Tooltip description with title prop

Tooltip
Tooltip icon
Tooltip + arrow position
Tooltip icon + arrow position
Use this Function : LGNTooltip for Tooltip & LGNTooltipIcon for Tooltip Icon

This code sample demonstrates how to modify the variant of Tooltip :

A. Tooltip

LGNTooltipBase(text: "This is a tooltip", tipPosition: .noTip)

As view modifier.

@State private var isShowing: = false
var body: some View {
VStack {
LGNOutlineBtn(title: "Tap to show tooltip", {
isShowing.toggle()
})
.variant(size: .normal, responsive: false)
.lgnTooltip($isShowing, text: "this is tooltip", position: .noTip)

B. Tooltip Icon

LGNTooltipIcon(text: "This is a tooltip", position: .noTip)

C. Tooltip + arrow position

LGNTooltipBase(text: "This is a tooltip")

As view modifier.

@State private var isShowing: = false
var body: some View {
VStack {
LGNOutlineBtn(title: "Tap to show tooltip", {
isShowing.toggle()
})
.variant(size: .normal, responsive: false)
.lgnTooltip($isShowing, text: "this is tooltip")

D. Tooltip icon + arrow position

LGNTooltipIcon(text: "This is a tooltip")

Attribute

Legion Have 1 Attribute for Customize Tooltip :

Position

This position attribute for user to add arrow position on the tooltip

Bottom Center

This code sample demonstrates how to modify the type of Tooltip :

Tooltip
Tooltip Icon

Tooltip

LGNTooltipBase(text: "This is a tooltip")

As View modifier.

@State private var isShowing: = false
var body: some View {
VStack {
LGNOutlineBtn(title: "Tap to show tooltip", {
isShowing.toggle()
})
.variant(size: .normal, responsive: false)
.lgnTooltip($isShowing, text: "this is tooltip")

Tooltip Icon

LGNTooltipIcon(text: "This is a tooltip")

Bottom Left

This code sample demonstrates how to modify the type of Tooltip :

Tooltip
Tooltip Icon

Tooltip

LGNTooltipBase(text: "This is a tooltip", tipPosition: .bottomLeft)

As View modifier.

@State private var isShowing: = false
var body: some View {
VStack {
LGNOutlineBtn(title: "Tap to show tooltip", {
isShowing.toggle()
})
.variant(size: .normal, responsive: false)
.lgnTooltip($isShowing, text: "this is tooltip", position: .topRight)

Tooltip Icon

LGNTooltipIcon(text: "This is a tooltip", position: .topLeft)

Bottom Right

This code sample demonstrates how to modify the type of Tooltip :

Tooltip
Tooltip Icon

Tooltip

LGNTooltipBase(text: "This is a tooltip", tipPosition: .bottomRight)

As View modifier.

@State private var isShowing: = false
var body: some View {
VStack {
LGNOutlineBtn(title: "Tap to show tooltip", {
isShowing.toggle()
})
.variant(size: .normal, responsive: false)
.lgnTooltip($isShowing, text: "this is tooltip", position: .topLeft)

Tooltip Icon

LGNTooltipIcon(text: "This is a tooltip", position: .topRight)

Top Center

This code sample demonstrates how to modify the type of Tooltip :

Tooltip
Tooltip Icon

Tooltip

LGNTooltipBase(text: "This is a tooltip", tipPosition: .top)

As View modifier.

@State private var isShowing: = false
var body: some View {
VStack {
LGNOutlineBtn(title: "Tap to show tooltip", {
isShowing.toggle()
})
.variant(size: .normal, responsive: false)
.lgnTooltip($isShowing, text: "this is tooltip", position: .bottom)

Tooltip Icon

LGNTooltipIcon(text: "This is a tooltip", position: .bottom)

Left

This code sample demonstrates how to modify the type of Tooltip :

Tooltip
Tooltip Icon

Tooltip

LGNTooltipBase(text: "This is a tooltip", tipPosition: .left)

As View modifier.

@State private var isShowing: = false
var body: some View {
VStack {
LGNOutlineBtn(title: "Tap to show tooltip", {
isShowing.toggle()
})
.variant(size: .normal, responsive: false)
.lgnTooltip($isShowing, text: "this is tooltip", position: .right)

Tooltip Icon

LGNTooltipIcon(text: "This is a tooltip", position: .left)

This code sample demonstrates how to modify the type of Tooltip :

Tooltip
Tooltip Icon

Tooltip

LGNTooltipBase(text: "This is a tooltip", tipPosition: .right)

As View modifier.

@State private var isShowing: = false
var body: some View {
VStack {
LGNOutlineBtn(title: "Tap to show tooltip", {
isShowing.toggle()
})
.variant(size: .normal, responsive: false)
.lgnTooltip($isShowing, text: "this is tooltip", position: .left)

Tooltip Icon

LGNTooltipIcon(text: "This is a tooltip", position: .right)

Properties

LGNTooltipBase properties

PropertiesDescriptionDefault Value
textthe main text you want to display on tooltip
tipPositionarrow location related to tooltip body. .noTip, .bottom, .bottomLeft, .bottomRight, .top, .left, and .right.bottom

lgnTooltip view modifier function properties

PropertiesDescriptionDefault Value
enabledreceive your boolean binding variable to decide whether or not the tooltip shall appear.constant(true)
textthe main text you want to display on tooltip
positiontooltip location related to parent view. .noTip, .bottom, .bottomLeft, .bottomRight, .top, .left, and .right.top
maxWidthmaximum width of tooltip body500
maxHeightmaximum height of tooltip body500

LGNTooltipIcon properties

PropertiesDescriptionDefault Value
textthe main text you want to display on tooltip
positiontooltip location related to icon view. .noTip, .bottom, .bottomLeft, .bottomRight, .top, .left, and .right.top
maxWidthmaximum width of tooltip body400
maxHeightmaximum height of tooltip body400
isTooltipShownreceive your boolean binding variable to decide whether or not the tooltip shall appear.constant(true)
iconthe icon you want the tooltip will point onImage(systemName: "questionmark.circle")

Example Project

LGNTooltipBase(
text: "Text to be shown inside tooltip",
tipPosition: .left
)
Text("I use view modifier")
.lgnTooltip(
$shouldShowTooltip, // your boolean state
text: "Text to be shown inside tooltip",
position: .topLeft,
maxWidth: 400,
maxHeight: 400
)
LGNTooltipIcon(
$shouldShowTooltip, // your boolean state
icon: Image(systemName: "questionmark.circle"),
text: "Text to be shown inside tooltip",
position: .top,
maxWidth: 400,
maxHeight: 400
) { isShown in
print("Icon is tapped, and tooltip shown is \(isShown)")