How to use ember-tooltips - 10 common examples

export default function assertTooltipSide(assert, options = {}) {
  const { side } = options;

  validateSide(side);

  const { expectedGreaterDistance, expectedLesserDistance } = getPositionDifferences(options);

  /* When the side is top or left, the greater number
  is the target's position. Thus, we check that the
  target's position is greater than the tooltip's
  position. */

  assert.ok(expectedGreaterDistance > expectedLesserDistance,
    `Tooltip should be on the ${side} side of the target`);
}

export default function assertTooltipSpacing(assert, options) {
  const { side, spacing } = options;

  validateSide(side, 'assertTooltipSpacing');

  if (typeof spacing !== 'number') {
    emberAssert(`You must pass spacing as a number like assertTooltipSpacing(assert, { side: 'top', spacing: 10 });`);
  }

  const { expectedGreaterDistance, expectedLesserDistance } = getPositionDifferences(options);
  const actualSpacing = Math.round(expectedGreaterDistance - expectedLesserDistance);

  /* When the side is top or left, the greater number
  is the target's position. Thus, we check that the
  target's position is greater than the tooltip's
  position. */

  const isSideCorrect = expectedGreaterDistance > expectedLesserDistance;
  const isSpacingCorrect = actualSpacing === spacing;

  assert.ok(isSideCorrect && isSpacingCorrect,
    `assertTooltipSpacing(): the tooltip should be in the correct position:
        - Tooltip should be on the ${side} side of the target: ${isSideCorrect}.
        - On the ${side} side of the target, the tooltip should be ${spacing}px from the target but it was ${actualSpacing}px`);
}

export default function assertTooltipSide(assert, options = {}) {
  const { side } = options;

  validateSide(side);

  const { expectedGreaterDistance, expectedLesserDistance } = getPositionDifferences(options);

  /* When the side is top or left, the greater number
  is the target's position. Thus, we check that the
  target's position is greater than the tooltip's
  position. */

  assert.ok(expectedGreaterDistance > expectedLesserDistance,
    `Tooltip should be on the ${side} side of the target`);
}

export default function assertTooltipSpacing(assert, options) {
  const { side, spacing } = options;

  validateSide(side, 'assertTooltipSpacing');

  if (typeof spacing !== 'number') {
    emberAssert(`You must pass spacing as a number like assertTooltipSpacing(assert, { side: 'top', spacing: 10 });`);
  }

  const { expectedGreaterDistance, expectedLesserDistance } = getPositionDifferences(options);
  const actualSpacing = Math.round(expectedGreaterDistance - expectedLesserDistance);

  /* When the side is top or left, the greater number
  is the target's position. Thus, we check that the
  target's position is greater than the tooltip's
  position. */

  const isSideCorrect = expectedGreaterDistance > expectedLesserDistance;
  const isSpacingCorrect = actualSpacing === spacing;

  assert.ok(isSideCorrect && isSpacingCorrect,
    `assertTooltipSpacing(): the tooltip should be in the correct position:
        - Tooltip should be on the ${side} side of the target: ${isSideCorrect}.
        - On the ${side} side of the target, the tooltip should be ${spacing}px from the target but it was ${actualSpacing}px`);
}

export default function assertTooltipSide(assert, options = {}) {
  const { side } = options;

  validateSide(side);

  const { expectedGreaterDistance, expectedLesserDistance } = getPositionDifferences(options);

  /* When the side is top or left, the greater number
  is the target's position. Thus, we check that the
  target's position is greater than the tooltip's
  position. */

  assert.ok(expectedGreaterDistance > expectedLesserDistance,
    `Tooltip should be on the ${side} side of the target`);
}

export default function assertTooltipSpacing(assert, options) {
  const { side, spacing } = options;

  validateSide(side, 'assertTooltipSpacing');

  if (typeof spacing !== 'number') {
    emberAssert(`You must pass spacing as a number like assertTooltipSpacing(assert, { side: 'top', spacing: 10 });`);
  }

  const { expectedGreaterDistance, expectedLesserDistance } = getPositionDifferences(options);
  const actualSpacing = Math.round(expectedGreaterDistance - expectedLesserDistance);

  /* When the side is top or left, the greater number
  is the target's position. Thus, we check that the
  target's position is greater than the tooltip's
  position. */

  const isSideCorrect = expectedGreaterDistance > expectedLesserDistance;
  const isSpacingCorrect = actualSpacing === spacing;

export default function assertTooltipSide(assert, options = {}) {
  const { side } = options;

  validateSide(side);

  const { expectedGreaterDistance, expectedLesserDistance } = getPositionDifferences(options);

  /* When the side is top or left, the greater number
  is the target's position. Thus, we check that the
  target's position is greater than the tooltip's
  position. */

  assert.ok(expectedGreaterDistance > expectedLesserDistance,
    `Tooltip should be on the ${side} side of the target`);
}

export default function assertTooltipSpacing(assert, options) {
  const { side, spacing } = options;

  validateSide(side, 'assertTooltipSpacing');

  if (typeof spacing !== 'number') {
    emberAssert(`You must pass spacing as a number like assertTooltipSpacing(assert, { side: 'top', spacing: 10 });`);
  }

  const { expectedGreaterDistance, expectedLesserDistance } = getPositionDifferences(options);
  const actualSpacing = Math.round(expectedGreaterDistance - expectedLesserDistance);

  /* When the side is top or left, the greater number
  is the target's position. Thus, we check that the
  target's position is greater than the tooltip's
  position. */

  const isSideCorrect = expectedGreaterDistance > expectedLesserDistance;
  const isSpacingCorrect = actualSpacing === spacing;

};

    this.get('tooltipSupportedProperties').forEach(function(property) {

      /* Ignore content because we dealt with it already */

      if (property === 'content') {
        return;
      }

      const capitalizedProperty = Ember.String.capitalize(property);

      tooltipOptions[property] = component.get(property) || this.get(`tooltip${capitalizedProperty}`);
    }, this);

    tooltip = renderTooltip(this.get('element'), tooltipOptions, renderContext);

    this.set('tooltip', tooltip);

    /* Bind observer if tooltipContent changes */

    this.addObserver('tooltipContent', this, this._tooltipContentDidChange);

    /* Bind observer if in manual-triggering mode */

    if (tooltipOptions.event === 'manual' || tooltipOptions.event === 'none') {
      if (componentWasPassed) {

        /* Keep track of child tooltip component */

        this.set('tooltipChildComponent', component);

* @method isElementElsewhere
 * @param {DOM element} element
 * @param {jQuery element} $target
 * @param {jQuery element} $popover
 * @return {boolean}
 * @public
 */

export function isElementElsewhere(element, $target, $popover) {
  const isElementOutsidePopover = !isElementInPopover(element, $popover);
  const isElementOutsideTarget = !isElementInTargetAndNotInPopover(element, $target, $popover);

  return isElementOutsideTarget && isElementOutsidePopover;
}

export default TooltipAndPopoverComponent.extend({

  /* Options */

  hideDelay: 250,

  /* Properties */

  classNames: ['ember-popover'],
  layout,

  _isMouseInside: false,

  didRender() {

    /* The lazy-render popover component instance needs
    access to the childView so that it can call the