diff --git a/README.md b/README.md index 8961379c..242fcde7 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,16 @@ Version 2.4.0 introduces lazy rendering. Tooltips and popovers generally don't n The easiest way to add a tooltip to any component is with the `{{tooltip-on-component}}` component: +```hbs +{{#my-component}} + Hover for more info + + {{tooltip-on-component text='Here is more info!'}} +{{/my-component}} +``` + +Or in block form: + ```hbs {{#my-component}} Hover for more info @@ -72,6 +82,16 @@ If you want to add a tooltip to an element that is not an Ember component, you c By default, the tooltip will attach itself to its parent element: +```hbs +
+ Hover for more info + + {{tooltip-on-element text='Here is more info!'}} +
+``` + +Or in block form: + ```hbs
Hover for more info diff --git a/addon/components/lazy-render-wrapper.js b/addon/components/lazy-render-wrapper.js index ce55a8f2..7f13d942 100644 --- a/addon/components/lazy-render-wrapper.js +++ b/addon/components/lazy-render-wrapper.js @@ -37,6 +37,7 @@ const PASSABLE_PROPERTIES = [ 'tooltipIsVisible', 'hideDelay', 'target', + 'text', // non-publicized attributes 'updateFor', diff --git a/addon/templates/components/lazy-render-wrapper.hbs b/addon/templates/components/lazy-render-wrapper.hbs index 89cc3bd0..e17fad28 100644 --- a/addon/templates/components/lazy-render-wrapper.hbs +++ b/addon/templates/components/lazy-render-wrapper.hbs @@ -4,9 +4,13 @@ class=class id=id }} - {{yield (hash - hide=(action "hide") - )}} + {{#if hasBlock}} + {{yield (hash + hide=(action "hide") + )}} + {{else}} + {{text}} + {{/if}} {{/component}} {{/if}} diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs index 8050854b..ed89889a 100644 --- a/tests/dummy/app/templates/index.hbs +++ b/tests/dummy/app/templates/index.hbs @@ -52,6 +52,7 @@
  • Using custom styling
  • Using async content
  • Using a popover instead of a tooltip
  • +
  • Using in inline form
  • @@ -205,3 +206,18 @@ {{code-snippet name='popover.hbs'}} + +
    +

    Using in inline form

    + +{{!-- BEGIN-SNIPPET inline-content --}} +{{#some-component}} + Tooltip has async content + + {{tooltip-on-component text='More info here'}} +{{/some-component}} +{{!-- END-SNIPPET --}} + + {{code-snippet name='inline-content.hbs'}} + +
    diff --git a/tests/integration/components/text-test.js b/tests/integration/components/text-test.js new file mode 100644 index 00000000..58cb7535 --- /dev/null +++ b/tests/integration/components/text-test.js @@ -0,0 +1,20 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('tooltip-on-element', 'Integration | Component | inline', { + integration: true +}); + +test('tooltip-on-element renders with text param', function(assert) { + + this.render(hbs` + {{tooltip-on-element text='Here is more info'}} + `); + + assert.equal(this.$().text().trim(), 'Here is more info', + 'Should render with content equal to the text property'); + + assert.ok(this.$().find('.ember-tooltip').length, + 'Should create a tooltip element'); + +});