Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Tooltip

Shows additional context on tap or hover.

banner-Tooltip
Component Status Details

Status component contains a list of checks and completeness that has been tested and owned by each component

check-list-icon We don't use color as the only visual tool to convey information.
check-list-icon The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.check-list-icon The title is the component name that uses the frame base component template.check-list-icon The base component name contains: .Base & "Component Name" if there is more than one.check-list-icon All component properties use the Legion foundation.
check-list-icon We can change all the parts that are connected to the component base.check-list-icon The inside of the base component remains connected to the master component.check-list-icon All variant options are not damaged when we change from one to another.check-list-icon Overriding changes to components will not reset other variants.
check-list-icon Component's already has component specs documentation.

Status

Resources

Upcoming Upcoming

A tooltip is a short descriptive message that appears near a view when the user long presses on the view or hovers over it. This tooltip is useful if your app uses icons to represent an action or information to save space in the layout.

Legion Tooltip Android Compose

Orientations and Animations

We have four orientations :

  1. Tooltip Orientation Start
  2. Tooltip Orientation Top
  3. Tooltip Orientation Bottom
  4. Tooltip Orientation End

and also have four animations in tooltip arrow :

  1. Tooltip Animation Heartbeat
  2. Tooltip Animation Rotate
  3. Tooltip Animation Shake
  4. Tooltip Animation Breath

Usage

To use the Tooltip component, you need to define the parameter in builder and create instance. After that call function show to display Tooltip in the screen.

Orientation

Start

LgnTooltip(
requesterView = {
Icon(
imageVector = Icons.Default.Check,
contentDescription = "",
modifier = it
)
},
tooltipContent = {

Top

LgnTooltip(
requesterView = {
Icon(
imageVector = Icons.Default.Check,
contentDescription = "",
modifier = it
)
},
tooltipContent = {

Bottom

LgnTooltip(
requesterView = {
Icon(
imageVector = Icons.Default.Check,
contentDescription = "",
modifier = it
)
},
tooltipContent = {

End

LgnTooltip(
requesterView = {
Icon(
imageVector = Icons.Default.Check,
contentDescription = "",
modifier = it
)
},
tooltipContent = {

Animation

Heartbeat

LgnTooltip(
requesterView = {
Icon(
imageVector = Icons.Default.Check,
contentDescription = "",
modifier = it
)
},
tooltipContent = {

Rotate

LgnTooltip(
requesterView = {
Icon(
imageVector = Icons.Default.Check,
contentDescription = "",
modifier = it
)
},
tooltipContent = {

Shake

LgnTooltip(
requesterView = {
Icon(
imageVector = Icons.Default.Check,
contentDescription = "",
modifier = it
)
},
tooltipContent = {

Breath

LgnTooltip(
requesterView = {
Icon(
imageVector = Icons.Default.Check,
contentDescription = "",
modifier = it
)
},
tooltipContent = {

Attributes

ParametersTypesDescriptions
requesterView@Composable (Modifier) -> UnitSet Content For Request Tooltip
tooltipContent@Composable () -> UnitSet Tooltip Content
animationLgnTooltipAnimationSet Type of Tooltip Animation
arrowOrientationLgnTooltipOrientationSet Tooltip Arrow Orientation
backgroundColorColorSet Tooltip Background Color