An ember-cli addon for using Tooltipster in Ember applications. The default sideTip, and the ScrollableTip plugins come preconfigured.

(We will be registering this as an NPM package soon. For now, pull what you need directly from GitHub. See Git URLs as Dependencies.)

npm install nsf-open/nsf-ember-tooltip#commit-ish --save-dev

It's pretty simple. You provide the tooltip content, and the trigger content. The component will take care of the rest.

Inline form

{{! Using positional parameters }}
{{tool-tip 'Here is some more information' 'I have a tooltip'}}

{{! Equivalent with named parameters }}
{{tool-tip content='Here is some more information' text='I have a tooltip'}}

{{! The title attribute may also be used to provide the tip's content }}
{{tool-tip title='Here is some more information' text='I have a tooltip'}}

Block form

{{! The component's yield block becomes the trigger }}
{{#tool-tip 'Here is some more information'}}
    I have a tooltip
{{/tool-tip}}

{{! For complex content that you do not want to create programmatically }}
{{! you can also define the tooltip content in the block }}
{{#tool-tip}}
    I have a tooltip
    <div data-tooltip-content>
        <p><strong>Here is some more information</strong></p>
    </div>
{{/tool-tip}}

NOTE: using data-tooltip-content in the component's yield block currently has one limitation: its content cannot be re-rendered. When first created, the component detaches that element from the DOM before passing it to Tooltipster. Sorry, we're working on it!

{{tool-tip}} supports (almost) all of the basic options provided by Tooltipster, listed here.

NOTE: We need to deviate from Tooltipster in one significant place - the trigger option. Since trigger is used internally by Ember components, use tipTrigger instead.

In addition, we have added:

The component provides the core Tooltipster styles and default theme out of the box. If you want to roll your own styles, then you can disable this in your app's environment.js:

const ENV = {
  'nsf-ember-tooltip': {
    excludeDefaultStyles: true,
  }
};

If you are using SASS, the component provides an optional partial and mixin that you may import to change things up.

To import:

@import 'nsf-ember-tooltip/styles';

Available variables (with their defaults):

$tooltipster-color:         white;
$tooltipster-bg:            #565656;
$tooltipster-border:        black;
$tooltipster-border-weight: 2px;
$tooltipster-border-radius: 4px;
$tooltipster-arrow-width:   10px;
$tooltipster-padding:       6px 14px;
$tooltipster-line-height:   18px;

Using the mixin to create more variants:

.my-custom-tooltipster-theme-name {
  @include tooltipster-variant(color, background-color, border-color [, border-weight: 2px, arrow-width: 10px]);
}