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');
+
+});