hmb_tooltip 0.0.5

A Custom Tooltip component

A Custom Tooltip component

Features

A Custom Tooltip component

Getting started

flutter pub add hmb_tooltip

Usage

class ASTooltipDemo extends StatelessWidget {
  const ASTooltipDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const ASAppBar(
        title: 'tooltip demo page',
      ),
      body: Column(
        children: [
          50.vsh,
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ASTooltip(
                text: 'Click and Ask me questions!',
                color: ASColors.color5F5CB0,
                milliseconds: 0,
                arrowAlign: ArrowAlign.bottomLeft,
                animateDuration: const Duration(milliseconds: 1500),
                width: 80,
                child: Container(
                  width: 50,
                  height: 50,
                  color: ASColors.random,
                ),
              ),
              60.vsw,
              ASTooltip(
                text: 'Click and Ask me questions!',
                color: ASColors.color5F5CB0,
                milliseconds: 0,
                arrowAlign: ArrowAlign.bottomCenter,
                animateDuration: const Duration(milliseconds: 1500),
                width: 80,
                child: Container(
                  width: 50,
                  height: 50,
                  color: ASColors.random,
                ),
              ),
              60.vsw,
              ASTooltip(
                text: 'Click and Ask me questions!',
                color: ASColors.color5F5CB0,
                milliseconds: 0,
                arrowAlign: ArrowAlign.bottomRight,
                animateDuration: const Duration(milliseconds: 1500),
                width: 80,
                child: Container(
                  width: 50,
                  height: 50,
                  color: ASColors.random,
                ),
              ),
            ],
          ),
          20.vsh,
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ASTooltip(
                text: 'Click and Ask me questions!',
                color: ASColors.color5F5CB0,
                milliseconds: 0,
                arrowAlign: ArrowAlign.topLeft,
                animateDuration: const Duration(milliseconds: 1500),
                width: 80,
                child: Container(
                  width: 50,
                  height: 50,
                  color: ASColors.random,
                ),
              ),
              60.vsw,
              ASTooltip(
                text: 'Click and Ask me questions!',
                color: ASColors.color5F5CB0,
                milliseconds: 0,
                arrowAlign: ArrowAlign.topCenter,
                animateDuration: const Duration(milliseconds: 1500),
                width: 80,
                child: Container(
                  width: 50,
                  height: 50,
                  color: ASColors.random,
                ),
              ),
              60.vsw,
              ASTooltip(
                text: 'Click and Ask me questions!',
                color: ASColors.color5F5CB0,
                milliseconds: 0,
                arrowAlign: ArrowAlign.topRight,
                animateDuration: const Duration(milliseconds: 1500),
                width: 80,
                child: Container(
                  width: 50,
                  height: 50,
                  color: ASColors.random,
                ),
              ),
            ],
          ),
          200.vsh,
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ASTooltip(
                text: 'Click and Ask me questions!',
                color: ASColors.color5F5CB0,
                milliseconds: 0,
                arrowAlign: ArrowAlign.rightBottom,
                animateDuration: const Duration(milliseconds: 1500),
                width: 80,
                child: Container(
                  width: 50,
                  height: 50,
                  color: ASColors.random,
                ),
              ),
              60.vsw,
              ASTooltip(
                text: 'Click and Ask me questions!',
                color: ASColors.color5F5CB0,
                milliseconds: 0,
                arrowAlign: ArrowAlign.rightCenter,
                animateDuration: const Duration(milliseconds: 1500),
                width: 80,
                child: Container(
                  width: 50,
                  height: 50,
                  color: ASColors.random,
                ),
              ),
              60.vsw,
              ASTooltip(
                text: 'Click and Ask me questions!',
                color: ASColors.color5F5CB0,
                milliseconds: 0,
                arrowAlign: ArrowAlign.rightTop,
                animateDuration: const Duration(milliseconds: 1500),
                width: 80,
                child: Container(
                  width: 50,
                  height: 50,
                  color: ASColors.random,
                ),
              ),
            ],
          ),
          200.vsh,
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ASTooltip(
                text: 'Click and Ask me questions!',
                color: ASColors.color5F5CB0,
                milliseconds: 0,
                arrowAlign: ArrowAlign.leftBottom,
                animateDuration: const Duration(milliseconds: 1500),
                width: 80,
                child: Container(
                  width: 50,
                  height: 50,
                  color: ASColors.random,
                ),
              ),
              60.vsw,
              ASTooltip(
                text: 'Click and Ask me questions!',
                color: ASColors.color5F5CB0,
                milliseconds: 0,
                arrowAlign: ArrowAlign.leftCenter,
                animateDuration: const Duration(milliseconds: 1500),
                width: 80,
                child: Container(
                  width: 50,
                  height: 50,
                  color: ASColors.random,
                ),
              ),
              60.vsw,
              ASTooltip(
                text: 'Click and Ask me questions!',
                color: ASColors.color5F5CB0,
                milliseconds: 0,
                arrowAlign: ArrowAlign.leftTop,
                animateDuration: const Duration(milliseconds: 1500),
                width: 80,
                child: Container(
                  width: 50,
                  height: 50,
                  color: ASColors.random,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Additional information

A Custom Tooltip component