Material ToolTip on Ionic

Hi,

Has someone already made a ToolTip (Material design) which shows a tiny Popup box with description of the button/component on-hold or on-focus event? I tried to make one by modifying Ionic popover but the appearance doesn’t look elegant. It would be nice to take an initiative to create a directive with on-hold event.
Material ToolTip

Any Ideas :wink:
@mhartington

Using tooltipster with jQuery and a directive?

directives.directive('tooltip', function () {
  return {
    restrict: 'C',
    link: function (scope, element, attrs) {
        var $element = $(element);
        $element.attr("title", attrs.title)
        $element.tooltipster({
            animation: attrs.animation,
            trigger: "click",
            position: "right",
            positionTracker: true,
            maxWidth: 500
        });
    }
  };
});

<div class="item tooltip" data-title="Hello World" data-animation="fade">
      <h1>Hello World</h1>
      <p>Click here!</p>
</div>

Regards

2 Likes

nice!
is there a way to avoid the jquery?

You need to search an Angular library :slight_smile:

Hi, This does not work with Ion-tabs. Ion-tabs has already an attribute called title to display label and this way title is not going to work. Any better solution?

You can change the name of the attribute! :slight_smile:

1 Like