ToolTip in Flutter


A tooltip widget is used to display message when users performs an actions like hover, taps, focus on the element.

In this article, we will discuss about fundamentals of tooltip widget in flutter. Here, we will learn through basic example.

Constructor of Tooltip

(new) Tooltip Tooltip({
  Key? key,
  required String message,
  double? height,
  EdgeInsetsGeometry? padding,
  EdgeInsetsGeometry? margin,
  double? verticalOffset,
  bool? preferBelow,
  bool? excludeFromSemantics,
  Decoration? decoration,
  TextStyle? textStyle,
  Duration? waitDuration,
  Duration? showDuration,
  Widget? child,
  TooltipTriggerMode? triggerMode,
  bool? enableFeedback,

Basic Syntax

   message: 'This is a tooltip',
   child: ElevatedButton(onPressed: () {}, child: const Text('Button')),

Code Implementation

import 'dart:ui';

import 'package:flutter/material.dart';

class ToolTipPage extends StatelessWidget {
  const ToolTipPage({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ToolTip Example"),
        centerTitle: true,
      body: Center(
        child: Tooltip(
          message: "This is a tooltip message",
          textStyle: const TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w600,
              color: Colors.white,
              fontStyle: FontStyle.italic),
          padding: const EdgeInsets.all(16.0),
          // margin: const EdgeInsets.all(10),
          decoration: const BoxDecoration(color: Colors.pinkAccent),
          child: SizedBox(
            height: 200,
            width: 300,
            child: Image.asset(
              fit: BoxFit.cover,


Here is the github link of this project:

Thank you for reading this article. If you have any queries regarding any topic, feel free to share with us. We will try to solve your problems.

Happy Learning.

Leave A Reply

Your email address will not be published.