SuperTooltip class

A powerful and customizable tooltip widget for Flutter.

SuperTooltip provides a flexible and feature-rich way to display tooltips in your Flutter applications. It offers several advantages over the standard Flutter Tooltip widget, including:

  • Flexible Positioning: Control the tooltip's position relative to its target widget using the popupDirection, top, right, bottom, and left parameters.
  • Customizable Appearance: Customize the tooltip's background color, border, shadow, and more using the backgroundColor, decoration, borderColor, and other styling parameters.
  • Barrier and Blur: Optionally display a barrier (scrim) and blur effect behind the tooltip using the showBarrier, barrierColor, showDropBoxFilter, sigmaX, and sigmaY parameters.
  • Close Button: Add a close button to allow users to manually dismiss the tooltip using the showCloseButton and closeButtonType parameters.
  • Animation: Smooth fade-in and fade-out animations for a visually appealing experience.
  • Event Callbacks: Trigger actions when the tooltip is shown or hidden using the onShow and onHide callbacks.
  • Touch-Through Area: Define an area that allows touch events to pass through the barrier using the touchThroughArea parameter.

To use SuperTooltip, wrap your target widget with a GestureDetector, MouseRegion, or InkWell and use the controller to manage the tooltip's visibility.

final _controller = SuperTooltipController();

GestureDetector(
  onTap: () => _controller.showTooltip(),
  child: SuperTooltip(
    controller: _controller,
    content: const Text('This is a tooltip!'),
    child: const Icon(Icons.info),
  ),
)
Inheritance
Available extensions

Constructors

SuperTooltip.new({Key? key, required Widget content, TooltipDirection popupDirection = TooltipDirection.down, SuperTooltipController? controller, void onLongPress()?, void onShow()?, void onHide()?, bool showCloseButton = false, CloseButtonType closeButtonType = CloseButtonType.inside, Color? closeButtonColor, double? closeButtonSize, bool? showBarrier, Color? barrierColor, bool snapsFarAwayVertically = false, bool snapsFarAwayHorizontally = false, bool? hasShadow, Color? shadowColor, double? shadowBlurRadius, double? shadowSpreadRadius, Offset? shadowOffset, double? top, double? right, double? bottom, double? left, double minimumOutsideMargin = 20.0, double verticalOffset = 0.0, double elevation = 0.0, Color? backgroundColor, DecorationBuilder? decorationBuilder, Widget? child, Color borderColor = Colors.black, BoxConstraints constraints = const BoxConstraints(minHeight: 0.0, maxHeight: double.infinity, minWidth: 0.0, maxWidth: double.infinity), Duration fadeInDuration = const Duration(milliseconds: 150), Duration fadeOutDuration = const Duration(milliseconds: 0), double arrowLength = 20.0, double arrowBaseWidth = 20.0, double arrowTipRadius = 0.0, double arrowTipDistance = 2.0, ClipAreaShape touchThroughAreaShape = ClipAreaShape.oval, double touchThroughAreaCornerRadius = 5.0, Rect? touchThroughArea, double borderWidth = 0.0, double borderRadius = 10.0, EdgeInsetsGeometry overlayDimensions = const EdgeInsets.all(10), EdgeInsetsGeometry bubbleDimensions = const EdgeInsets.all(10), bool hideTooltipOnTap = false, double sigmaX = 5.0, double sigmaY = 5.0, bool showDropBoxFilter = false, bool hideTooltipOnBarrierTap = true, bool toggleOnTap = false, bool showOnTap = true, List<BoxShadow>? boxShadows})

Properties

arrowBaseWidth → double
The width of the tooltip's arrow base.
final
arrowLength → double
The length of the tooltip's arrow.
final
arrowTipDistance → double
final
arrowTipRadius → double
The distance between the arrow tip and the target widget.
final
backgroundColor → Color?
The background color of the tooltip.
final
barrierColor → Color?
The color of the barrier.
final
borderColor → Color
The border color of the tooltip.
final
borderRadius → double
The border radius of the tooltip.
final
borderWidth → double
The width of the tooltip's border.
final
bottom → double?
top, right, bottom, left define the distance between the respective edges of the tooltip and the corresponding edges of the screen.
final
boxShadows → List<BoxShadow>?
A list of box shadows to apply to the tooltip.
final
bubbleDimensions → EdgeInsetsGeometry
EdgeInsetsGeometry for the bubble.
final
child → Widget?
The target widget to which the tooltip is attached.
final
closeButtonColor → Color?
The color of the close button.
final
closeButtonSize → double?
The size of the close button.
final
closeButtonType → CloseButtonType
The type of close button to display.
final
constraints → BoxConstraints
Box constraints for the tooltip's size.
final
content → Widget
The content parameter is required and specifies the widget to be displayed inside the tooltip.
final
controller → SuperTooltipController?
A SuperTooltipController to manage the tooltip's visibility and state.
final
decorationBuilder → DecorationBuilder?
A custom decoration for the tooltip.
final
elevation → double
The elevation of the tooltip.
final
fadeInDuration → Duration
The duration of the fade-in animation.
final
fadeOutDuration → Duration
The duration of the fade-out animation.
final
hashCode → int
The hash code for this object.
no setterinherited
hasShadow → bool?
Whether the tooltip should have a shadow.
final
hideTooltipOnBarrierTap → bool
Whether to hide the tooltip when the barrier is tapped.
final
hideTooltipOnTap → bool
Whether to hide the tooltip when tapped.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
left → double?
top, right, bottom, left define the distance between the respective edges of the tooltip and the corresponding edges of the screen.
final
minimumOutsideMargin → double
The minimum margin between the tooltip and the edges of the screen.
final
onHide → void Function()?
Called when the tooltip is hidden.
final
onLongPress → void Function()?
Called when the user long presses the target widget.
final
onShow → void Function()?
Called when the tooltip is shown.
final
overlayDimensions → EdgeInsetsGeometry
EdgeInsetsGeometry for the overlay.
final
popupDirection → TooltipDirection
The direction in which the tooltip should appear relative to its target widget.
final
top, right, bottom, left define the distance between the respective edges of the tooltip and the corresponding edges of the screen.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
shadowBlurRadius → double?
The blur radius of the shadow.
final
shadowColor → Color?
The color of the shadow.
final
shadowOffset → Offset?
The offset of the shadow.
final
shadowSpreadRadius → double?
The spread radius of the shadow.
final
showBarrier → bool?
Whether to display a barrier (scrim) behind the tooltip.
final
showCloseButton → bool
Whether to display a close button inside the tooltip.
final
showDropBoxFilter → bool
Whether to show a blur filter behind the tooltip.
final
showOnTap → bool
final
sigmaX → double
The sigmaX value for the blur filter (if showDropBoxFilter is true).
final
sigmaY → double
The sigmaY value for the blur filter (if showDropBoxFilter is true).
final
snapsFarAwayHorizontally → bool
Whether the tooltip should snap to the left or right of the screen if there's not enough space in the preferred direction.
final
snapsFarAwayVertically → bool
Whether the tooltip should snap to the top or bottom of the screen if there's not enough space in the preferred direction.
final
toggleOnTap → bool
Whether to toggle the tooltip's visibility when tapped.
final
top → double?
top, right, bottom, left define the distance between the respective edges of the tooltip and the corresponding edges of the screen.
final
touchThroughArea → Rect?
A rectangular area that allows touch events to pass through the barrier.
final
touchThroughAreaCornerRadius → double
The corner radius of the touch-through area.
final
touchThroughAreaShape → ClipAreaShape
The shape of the touch-through area.
final
verticalOffset → double
The vertical offset of the tooltip from its target widget.
final

Methods

animate({Key? key, List<Effect>? effects, AnimateCallback? onInit, AnimateCallback? onPlay, AnimateCallback? onComplete, bool? autoPlay, Duration? delay, AnimationController? controller, Adapter? adapter, double? target, double? value}) → Animate

Available on Widget, provided by the AnimateWidgetExtensions extension

Wraps the target Widget in an Animate instance, and returns the instance for chaining calls. Ex. myWidget.animate() is equivalent to Animate(child: myWidget).
createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<StatefulWidget>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited

Static Properties

barrierKey ↔ Key
Key used to identify the barrier.
getter/setter pair
bubbleKey ↔ Key
Key used to identify the bubble.
getter/setter pair
insideCloseButtonKey ↔ Key
Key used to identify the inside close button.
getter/setter pair
outsideCloseButtonKey ↔ Key
Key used to identify the outside close button.
getter/setter pair