Skip to main content

​
ChromiaTooltip

A customizable tooltip component for displaying contextual information on hover or long press.

​
Basic Usage

ChromiaTooltip(
  message: 'This is a tooltip',
  child: Icon(Icons.help),
)

​
Parameters

​
message
String
required
Tooltip message to display
​
child
Widget
required
The widget to display the tooltip on
​
preferBelow
bool
default:"true"
Whether to show the tooltip below the widget
​
verticalOffset
double?
Vertical offset from the widget (defaults to 24)
​
waitDuration
Duration?
Duration to wait before showing (defaults to 500ms)
​
showDuration
Duration?
Duration to show the tooltip (defaults to 2 seconds)
​
padding
EdgeInsetsGeometry?
Padding inside the tooltip
​
margin
EdgeInsetsGeometry?
Margin around the tooltip
​
decoration
Decoration?
Custom decoration for the tooltip
​
textStyle
TextStyle?
Custom text style

​
Custom Styling

ChromiaTooltip(
  message: 'Custom styled tooltip',
  preferBelow: false,
  waitDuration: Duration(milliseconds: 300),
  showDuration: Duration(seconds: 3),
  child: IconButton(
    icon: Icon(Icons.info),
    onPressed: () {},
  ),
)

​
ChromiaTooltip.rich

Creates a rich tooltip with title and message.

​
Basic Usage

ChromiaTooltip.rich(
  title: 'Help',
  message: 'This is a detailed tooltip with a title and longer explanation.',
  child: Icon(Icons.info),
)

​
Parameters

​
title
String
required
Title text for the tooltip
​
message
String
required
Message text for the tooltip
​
child
Widget
required
The widget to display the tooltip on
​
preferBelow
bool
default:"true"
Whether to show the tooltip below the widget
​
verticalOffset
double?
Vertical offset from the widget
​
waitDuration
Duration?
Duration to wait before showing
​
showDuration
Duration?
Duration to show the tooltip (defaults to 3 seconds for rich tooltips)

​
ChromiaHelpIcon

A help icon with a built-in tooltip.

​
Basic Usage

ChromiaHelpIcon(
  message: 'This field is required',
)

​
Parameters

​
message
String
required
Tooltip message
​
icon
IconData
default:"Icons.help_outline"
Help icon to display
​
size
double?
Icon size (defaults to 18)
​
color
Color?
Icon color

​
Example in Form

Row(
  children: [
    Text('Password'),
    SizedBox(width: 4),
    ChromiaHelpIcon(
      message: 'Password must be at least 8 characters',
    ),
  ],
)

​
ChromiaLongPressTooltip

A custom tooltip that shows on long press instead of hover.

​
Basic Usage

ChromiaLongPressTooltip(
  message: 'Long press tooltip',
  child: Container(
    padding: EdgeInsets.all(16),
    color: Colors.blue,
    child: Text('Long press me'),
  ),
)

​
Parameters

​
message
String
required
Tooltip message
​
child
Widget
required
The widget to display the tooltip on
​
duration
Duration
default:"Duration(seconds: 2)"
Duration to show the tooltip

​
Complete Example

class TooltipExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ChromiaAppBar(
        title: 'Tooltip Example',
        actions: [
          ChromiaTooltip(
            message: 'Search',
            child: IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
          ),
          ChromiaTooltip(
            message: 'Settings',
            child: IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {},
            ),
          ),
        ],
      ),
      body: Padding(
        padding: EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Tooltip Examples',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 32),
            
            // Basic tooltip
            Row(
              children: [
                Text('Basic Tooltip:'),
                SizedBox(width: 8),
                ChromiaTooltip(
                  message: 'This is a basic tooltip',
                  child: Icon(Icons.info_outline),
                ),
              ],
            ),
            SizedBox(height: 24),
            
            // Rich tooltip
            Row(
              children: [
                Text('Rich Tooltip:'),
                SizedBox(width: 8),
                ChromiaTooltip.rich(
                  title: 'Advanced Feature',
                  message: 'This is a rich tooltip with both a title and detailed message.',
                  child: Icon(Icons.help_outline),
                ),
              ],
            ),
            SizedBox(height: 24),
            
            // Help icon
            Row(
              children: [
                Text('With Help Icon:'),
                SizedBox(width: 8),
                ChromiaHelpIcon(
                  message: 'This is a convenient help icon with tooltip',
                ),
              ],
            ),
            SizedBox(height: 24),
            
            // Long press tooltip
            Text('Long Press Tooltip:'),
            SizedBox(height: 8),
            ChromiaLongPressTooltip(
              message: 'You long pressed this container!',
              duration: Duration(seconds: 3),
              child: Container(
                padding: EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.blue[100],
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Text('Long press me'),
              ),
            ),
            SizedBox(height: 32),
            
            // Form example
            Text(
              'Form Field Example',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 16),
            Row(
              children: [
                Text('Username'),
                SizedBox(width: 4),
                ChromiaHelpIcon(
                  message: 'Username must be 3-20 characters',
                  size: 16,
                ),
              ],
            ),
            SizedBox(height: 8),
            ChromiaTextField(
              hintText: 'Enter username',
            ),
          ],
        ),
      ),
    );
  }
}

​
Best Practices

  1. Keep it brief - Tooltip messages should be concise (1-2 sentences max)
  2. Use for clarification - Tooltips are best for providing additional context, not essential information
  3. Consider accessibility - Tooltips may not be accessible on touch devices without long press
  4. Don’t overuse - Too many tooltips can overwhelm users
  5. Rich tooltips for complex info - Use ChromiaTooltip.rich when you need a title and longer explanation

​
Tooltip Positioning

// Show above the widget
ChromiaTooltip(
  message: 'Tooltip above',
  preferBelow: false,
  child: Icon(Icons.arrow_upward),
)

// Show below with custom offset
ChromiaTooltip(
  message: 'Tooltip with offset',
  preferBelow: true,
  verticalOffset: 40,
  child: Icon(Icons.arrow_downward),
)

​
Custom Delays

ChromiaTooltip(
  message: 'Appears quickly',
  waitDuration: Duration(milliseconds: 100),
  showDuration: Duration(seconds: 5),
  child: Icon(Icons.flash_on),
)

Build docs developers (and LLMs) love

Get started for freeTalk to us