Tip

tooltip or a hint when hovering over an element

Using Grommet for HPE?See Tip examples and guidance.

Props

content

The tooltip content inside the drop.

node

"Additional info"

<Box>...</Box>

defaultVisible

Whether to display the tooltip initially.

boolean

true

false

dropProps

Any valid Drop prop to style the Tip drop container.

object

{ trapFocus: "false" }

plain

Whether content should have default styling from tip.content.

boolean

true

false

Theme

tip.content

Any valid Box property for the Tip container. Not applicable when using Tip plain prop.

object

{ 
  background: "background-contrast", 
  elevation: "small", 
  margin: "xsmall", 
  pad: { vertical: "xsmall", horizontal: "small" }, 
  round: "small"
}

tip.drop

Any valid Drop property for the Tip.

object

{
  align: { top: "bottom" }, 
  background: "none",
  elevation: "none",
  margin: "none"
}