Just released: Tooltips Module for Ionic Apps

showcase
1

Hey there!

I would like to announce a new module that I developed for Ionic Apps (3.x). If you liked using my previous modules (Ionic Image Loader, and/or Ionic Super Tabs) then you will like this one too!

This module lets you add Tooltips to your app. These tooltips can help explain features to your users, or provide some sort of feedback.

You can see it in action in the GIF below, or by cloning and testing the example project.

Ionic Tooltips Example
ionic-tooltips.gif?raw=true438×710

Examples

The module can be used to display tooltips for any element in your app. It also provides a special treatment for buttons in the header navigation (inspired by Google’s apps).

Here’s a quick example to show a tooltip below a button:

<!-- positionV specifies where the tooltip should be displayed vertically, can be either top or bottom -->
<!-- arrow tells the tooltip directive to show an arrow above the tooltip box -->
<button ion-button [tooltip]="I'm a tooltip below a button" positionV="bottom" arrow>
  Press me to see a tooltip
</button>

And here’s another example to show a tooltip below a nav button:

<ion-header>
  <ion-navbar>
    <ion-title>Page title</ion-title>
    <ion-buttons end>
      <!-- navTooltip tells the tooltip directive that this is a nav button -->
      <ion-button icon-only [tooltip]="Call" navTooltip>
        <ion-icon name="call"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Installation and Usage

Excited? Checkout the installation and usage sections in the zyra/ionic-tooltips Github Repo.

Suggestions and Issues

Do you have any suggestions? You can mention them here, but it’s better to post them on Github to keep everything in one place.

Are you experiencing issues with the plugin? Please open an issue on Github and I will get you the help you need as soon as I can.



Happy Coding :smile: !

11 Likes
2

The example gIf looks great - I just wonder what is the trigger for the tooltip? I always assumed that hover was not available on mobile devices.

3

Default is press but you can use click too. I will add hover support as well, for desktop apps.

1 Like
4

Sorry to ask the question but is there any difference between a press and a click?

I always assumed that the only event on a button was a click - can a press action be called without it be followed by a click event.

5

The module listens to either click, OR press. Depending on how you
configure it. Press is different than click, you basically need to press
and hold for about a second for the event to fire. Click fires when you
press and release.

6

This is great! I’ve been using your super tabs and they’re great too. Excellent stuff as usual!

1 Like
7

Thanks for the feedback!

8

Nice ! Is it possible to trigger them programmatically ? Would be awesome for tutorials, first time open pages, etc…

2 Likes
9

I plan to add it, but there is no milestone/deadline set at the moment.

Regards,
Ibby Hadeed

1 Like
10

Are you planning to add the support for Fab buttons also?

EDIT:
Apparently it works already… it looks like I wrongly used it before :slight_smile:
Sorry about that!

Thanks for great work.

11

This looks fantastic, and I’d love to try it out. What ways are there for me to style the tooltip? Can I also open one from the component file?

1 Like
12

Nice one!! I just now installed your swipable tabs and now I’m seeing this!
Greate work.

Suggestion: Tips should have effects option like bounce, flip, fade etc.

13

Awesome Module. It would be great to see a simple example for launching it programmatically since it must be such a common use case to use tooltips as a first-time hint on the phone.

7 Likes
14

Super one. I was looking exactly something like this.

15

Looks great.
Did you fully implement Hover support yet? I have tried it but hover is not setting it active - in browser.

<button ion-button tooltip="I'm a tooltip below a button" positionV="bottom" arrow>Test Hover</button>

16

This is what iam looking for past 2 3 days. this looks cool. will this one work in Ionic v1 app! thanks in advance.

17

Hi,

looks great. Thank you. However, is there any way to change the styling? This is essential in order to use the module in our apps.

Thanks, Heiner

18

go to the ionic-tooltip folder in the node modules and go through the script files one by one…You will find a class where the style is defined…Try to change the values of the style object and re-serve the application otherwise you will not be able see the changes.

19

Hi…Thanks for such an useful module…I have a tooltip for a button…Once I click the button, it pushes another page. The tooltip is working but it retains in the next page…Is there any way to avoid this.

20

Congratulations and thanks for it!