Skip to main content
The Stac Tooltip allows you to build a Flutter Tooltip widget using JSON. To learn more about Flutter’s Tooltip widget, refer to the official Flutter documentation.

​
Properties

PropertyTypeDescription
messageString?The plain text message displayed in the tooltip. Ignored if richMessage is provided.
richMessageStacTextSpan?Rich text content for the tooltip. Overrides message when provided.
constraintsStacBoxConstraints?Additional layout constraints applied to the tooltip content.
paddingStacEdgeInsets?Padding inside the tooltip. Defaults to Flutter’s tooltip theme padding.
marginStacEdgeInsets?Outer margin around the tooltip, useful near screen edges.
verticalOffsetdouble?Vertical distance between the tooltip and its child.
preferBelowbool?Whether the tooltip prefers to appear below its child. Defaults to true.
excludeFromSemanticsbool?Whether the tooltip message is excluded from the semantics tree.
decorationStacBoxDecoration?Background decoration for the tooltip (color, border radius, etc.).
textStyleStacTextStyle?Text style for the tooltip message.
textAlignStacTextAlign?Horizontal alignment of the tooltip text.
waitDurationStacDuration?Delay before showing the tooltip.
showDurationStacDuration?Duration the tooltip remains visible after activation.
exitDurationStacDuration?Duration of the fade-out animation.
enableTapToDismissboolWhether tapping the screen dismisses the tooltip. Defaults to true.
triggerModeStacTooltipTriggerMode?Determines how the tooltip is triggered (longPress or tap).
enableFeedbackbool?Enables acoustic or haptic feedback when the tooltip is shown.
childStacWidget?The widget the tooltip is attached to (Icon, IconButton, etc.).

​
Examples

​
Basic Tooltip

{
  "type": "tooltip",
  "message": "This is a basic tooltip",
  "child": {
    "type": "icon",
    "icon": "info",
    "size": 32
  }
}

​
Styled Tooltip

{
  "type": "tooltip",
  "message": "Custom styled tooltip",
  "preferBelow": false,
  "verticalOffset": 12,
  "decoration": {
    "color": "#4CAF50",
    "borderRadius": {
      "topLeft": 6,
      "topRight": 6,
      "bottomLeft": 6,
      "bottomRight": 6
    }
  },
  "textStyle": {
    "color": "#FFFFFF",
    "fontSize": 14,
    "fontWeight": "bold"
  },
  "child": {
    "type": "icon",
    "icon": "palette",
    "size": 32
  }
}

​
Tooltip with Delay & Duration

{
  "type": "tooltip",
  "message": "Appears after 1s, stays 3s",
  "waitDuration": {
    "milliseconds": 1000
  },
  "showDuration": {
    "milliseconds": 3000
  },
  "exitDuration": {
    "milliseconds": 300
  },
  "child": {
    "type": "icon",
    "icon": "timer",
    "size": 32
  }
}

​
Tooltip on IconButton

{
  "type": "tooltip",
  "message": "Notifications",
  "child": {
    "type": "iconButton",
    "icon": {
      "type": "icon",
      "icon": "notifications",
      "size": 24
    },
    "padding": {
      "left": 0,
      "top": 0,
      "right": 0,
      "bottom": 0
    },
    "onPressed": {
      "actionType": "none"
    }
  }
}

​
Tooltip with Rich Text Message

{
  "type": "tooltip",
  "richMessage": {
    "type": "textSpan",
    "children": [
      {
        "type": "textSpan",
        "text": "Bold ",
        "style": { "fontWeight": "bold" }
      },
      {
        "type": "textSpan",
        "text": "and normal text"
      }
    ]
  },
  "child": {
    "type": "icon",
    "icon": "text_fields",
    "size": 32
  }
}