How to use the ember-tooltips/utils/render-tooltip function in ember-tooltips

To help you get started, we’ve selected a few ember-tooltips examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github sir-dunxalot / ember-tooltips / addon / mixins / components / tooltips.js View on Github external
};

    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);
github basho-labs / riak-explorer-gui / app / components / tooltip / node-config.js View on Github external
const desc = (info.description.length) ? `<div class="description-wrapper"><div class="description">${info.description}</div></div>` : "";
      const example = (info.example.length) ? `<div class="example small">Example: ${info.example}</div>` : "";
      const internal_key = (info.internal_key.length) ? `<div class="internal-key small">Internal Key: ${info.internal_key}</div>` : "";
      const valid = (info.valid.length) ? `<div class="valid small">Valid: ${info.valid}</div>` : "";
      const wrapperEnd = ``;

      const toolTipTemplate =
        wrapperStart +
        title +
        desc +
        example +
        internal_key +
        valid +
        wrapperEnd;

      this.set('tooltipInstance', renderTooltip(element, {
        content: toolTipTemplate,
        event: 'hover',
        typeClass: 'wide'
      }));
    }
  }
});
github basho-labs / riak-explorer-gui / app / components / tooltip / bucket-props.js View on Github external
let ttDescription = (description !== undefined) ? `<div class="description-wrapper"><div class="description">${description}</div></div>` : '';
      let ttItemDefault = (itemDefault !== undefined) ? `<div class="default small">Default Value: ${itemDefault}</div>` : '';
      let ttEditable = (editable !== undefined) ? `<div class="editable small">Editable: ${editable}</div>` : '';
      let ttType = (type !== undefined) ? `<div class="type small">Type: ${type}</div>` : '';
      let wrapperEnd = ``;

      const toolTipTemplate =
        wrapperStart +
        ttTitle +
        ttDescription +
        ttItemDefault +
        ttEditable +
        ttType +
        wrapperEnd;

      this.set('tooltipInstance', renderTooltip(element, {
        content: toolTipTemplate,
        event: 'hover'
      }));
    }
  }
});
github basho-labs / riak-explorer-gui / app / components / tooltip / node-stats.js View on Github external
const units = (info.units !== 'n/a') ? `<div class="units small">Units: ${info.units}</div>` : "";
      const wrapperEnd = ``;

      const toolTipTemplate =
        wrapperStart +
          title +
          desc +
          example +
          schema_type +
          metric_type +
          period +
          scope +
          units +
        wrapperEnd;

      this.set('tooltipInstance', renderTooltip(element, {
        content: toolTipTemplate,
        event: 'hover',
        typeClass: 'wide'
      }));
    }
  }
});
github sir-dunxalot / ember-tooltips / addon / mixins / components / tooltips.js View on Github external
this.$().find('.has-tooltip').each(function() {
        const $element = Ember.$(this);

        tooltipSupportedProperties.forEach(function(property) {
          const capitalizedProperty = Ember.String.capitalize(property);
          const dasherizedProperty = Ember.String.dasherize(property);
          const value = $element.data(`tooltip-${dasherizedProperty}`);

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

        renderTooltip(this, tooltipOptions);
      });
    });