custom_tooltip_flutter 0.2.1

A highly customizable tooltip widget for Flutter with support for multiple positions, animations, and platform-specific interactions (hover for desktop/web, tap/hold for mobile).

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:custom_tooltip_flutter/custom_tooltip_flutter.dart';

void main() {
  runApp(const MyApp());
}

/// Main application widget demonstrating various CustomTooltip configurations.
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // Tạo GlobalKey để truy cập state của CustomTooltip
    final tooltipKey = GlobalKey<CustomTooltipState>();
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('CustomTooltip Examples')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              // Example 1: Basic tooltip with default settings
              const Text(
                'Default Tooltip:',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 10),
              CustomTooltip(
                key: tooltipKey,
                tooltipContent: const Text('This is a default tooltip!'),
                child: const Icon(
                  Icons.info_outline,
                  size: 50,
                  color: Colors.blue,
                ),
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: () {
                  tooltipKey.currentState?.hideTooltip();
                },
                child: const Text('Hide Tooltip (Demo)'),
              ),
              const SizedBox(height: 40),

              // Example 2: Customized tooltip with advanced styling
              const Text(
                'Customized Tooltip:',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 10),
              CustomTooltip(
                tooltipContent: const Text(
                  'This is a customized tooltip with a larger arrow, different offset, fixed width, and custom decoration.',
                  textAlign: TextAlign.center,
                ),
                arrowSize: 12.0, // Larger arrow for better visibility
                offset: 8.0, // Increased distance from target
                decoration: BoxDecoration(
                  color: Colors.deepPurpleAccent,
                  borderRadius: BorderRadius.circular(12),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withValues(alpha: 0.3),
                      blurRadius: 8,
                      offset: const Offset(0, 4),
                    ),
                  ],
                  border: Border.all(color: Colors.purple, width: 2),
                ),
                child: Container(
                  padding: const EdgeInsets.all(12.0),
                  decoration: BoxDecoration(
                    color: Colors.orangeAccent,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: const Text(
                    'Hover Me!',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 40),

              // Example 3: Mouse focus test - demonstrates improved mouse tracking
              const Text(
                'Mouse Focus Test Tooltip:',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 10),
              CustomTooltip(
                tooltipContent: Container(
                  padding: const EdgeInsets.all(8.0),
                  child: const Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        'Hover over this tooltip content!',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      SizedBox(height: 4),
                      Text(
                        'The tooltip should stay open when you move your mouse from the target to this content.',
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 12),
                      ),
                    ],
                  ),
                ),
                decoration: BoxDecoration(
                  color: Colors.green.shade100,
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(color: Colors.green, width: 2),
                ),
                child: Container(
                  padding: const EdgeInsets.all(16.0),
                  decoration: BoxDecoration(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: const Text(
                    'Test Mouse Focus',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 40),

              // Example 4: Tap to open mode - demonstrates the new tap functionality
              const Text(
                'Tap to Open Tooltip:',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 10),
              CustomTooltip(
                // Enable tap to open mode - disables mouse hover
                enableTapToOpen: true,
                tooltipContent: Container(
                  padding: const EdgeInsets.all(8.0),
                  child: const Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        'Tap to Open Mode!',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      SizedBox(height: 4),
                      Text(
                        'This tooltip opens on tap and closes on tap again.\nMouse hover is disabled in this mode.',
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 12),
                      ),
                    ],
                  ),
                ),
                decoration: BoxDecoration(
                  color: Colors.red.shade100,
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(color: Colors.red, width: 2),
                ),
                child: Container(
                  padding: const EdgeInsets.all(16.0),
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: const Text(
                    'Tap Me!',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}