Tool-tip component, allows rendering a tool-tip to arbitrary html element

component.js

/* global Tether */
import Ember from 'ember';

export default Ember.Component.extend({

  classNames: 'Tool-tip',
  tagName: 'span',

  setup: Ember.on('didInsertElement', function() {
    const parent = this.$().parent();
    this.set('tooltipTarget', parent);

    parent.on('mouseenter', () => {
      this.set('tooltipIsVisible', true);
    });

    parent.on('mouseleave', () => {
      this.set('tooltipIsVisible', false);
    });

    Ember.run.scheduleOnce('afterRender', () => {
      Tether.position();
    });
  }),

  containerClassNames: Ember.computed('', 'tooltipIsVisible', function() {
    let classNames = ['Tool-tip__dialog'];

    if (this.get('tooltipIsVisible')) {
      classNames.push('Tool-tip__dialog--is-visible');
    }

    return classNames;
  })

});

demo-use.hbs

<a href='#' {{action 'setCorrectAnswer' answer}}
  class="Multiple-choice-question-form__answer-action
    Multiple-choice-question-form__answer-action--right
    {{if answer.isCorrect 'Multiple-choice-question-form__answer-action--success'}}">
  {{answer.label}}

  {{tool-tip content='Mark answer correct'}}
</a>

styles.scss

.Tool-tip {

  &__dialog {
    z-index: 9000;
    background-color: #333;
    color: white;
    font-weight: 200;
    border-radius: 4px;
    padding: 5px 8px;
    top: -18px !important;
    font-size: 12px;
    opacity: 0;

    &--is-visible {
      animation: fadeIn 0.25s;
      animation-delay: 0.5s;
      animation-fill-mode: forwards;
    }
  }

  &__arrow {
    position: absolute;
    bottom: -6px;
    left: 45%;
    @include triangle(15px, #333, down);
  }

}

template.hbs

{{#tether-dialog
  target=tooltipTarget
  hasOverlay=false
  containerClassNames=containerClassNames
  attachment='bottom center'
  targetAttachment='top center'}}
  {{content}}
  <span class="Tool-tip__arrow"></span>
{{/tether-dialog}}