https://github.com/joafc96/balloon_tip

A multi directional tooltip used to display any content with inbuilt support for scroll views that can be wrapped on any widgets that you like.
https://github.com/joafc96/balloon_tip

balloontip overlay scrollable-tooltip tooltip

Last synced: 18 days ago
JSON representation

A multi directional tooltip used to display any content with inbuilt support for scroll views that can be wrapped on any widgets that you like.

• Host: GitHub
• URL: https://github.com/joafc96/balloon_tip
• Owner: joafc96
• License: mit
• Created: 2023-03-28T13:24:28.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-30T03:53:00.000Z (about 1 year ago)
• Last Synced: 2024-11-15T18:16:35.015Z (3 months ago)
• Topics: balloontip, overlay, scrollable-tooltip, tooltip
• Language: Dart
• Homepage: https://pub.dev/packages/balloon_tip
• Size: 8.19 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# balloon_tip

`balloon_tip` gives you more flexibility over the Flutter standard `Tooltip` by allowing you to set arbitrary content. It also expands on their single axis layout algorithm to fit both vertically and horizontally. The tooltip can be positioned along any axis and importantly can be used inside scroll views.









## Features

* Easy creation of multi directional overlay tooltips

* Algorithm automatically calculates where the tool tip has to be positioned wrt child provided

* Opportunity to hide the tooltip programmatically

* The tooltip works in lists and follow the target through scrolling (LFG)

* No external dependencies

## Getting Started

Add this to your package's `pubspec.yaml` file:

```yaml

dependencies:

  balloon_tip:  ^0.0.2

```

Now in your `Dart` code, you can use:

```dart

import 'package:balloon_tip/balloon_tip.dart';

```

To add the UI is as simple as: 

```dart

BalloonTip(

      arrowPosition: ArrowPosition.bottomCenter,

      content: Text(

                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel mauris velit. Maecenas convallis sapien non pharetra viverra. Maecenas tristique purus at aliquam convallis. Nam vestibulum ipsum sem. In scelerisque massa at iaculis tempor.",

                  style: TextStyle(

                  fontSize: 14,

                  height: 1.5,

                  fontWeight: FontWeight.w300,

                  color: Colors.white,

                ),

              ),

      child: FloatingActionButton.small(

        onPressed: () {},

        backgroundColor: Colors.pinkAccent,

        child: const Icon(Icons.favorite),

  ),

),

```

## Contributing

Issues and PRs welcome. Unless otherwise specified, all contributions to this lib will be under MIT license.