Merge pull request #116 from sir-dunxalot/text-property

Text property

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
+<div>
+  Hover for more info
+
+  {{tooltip-on-element text='Here is more info!'}}
+</div>
+```
+
+Or in block form:
+
 ```hbs
 <div>
   Hover for more info

addon/components/lazy-render-wrapper.js

@@ -37,6 +37,7 @@ const PASSABLE_PROPERTIES = [
 	'tooltipIsVisible',
 	'hideDelay',
 	'target',
+	'text',
 
 	// non-publicized attributes
 	'updateFor',

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}}
 

tests/dummy/app/templates/index.hbs

@@ -52,6 +52,7 @@
     <li><a href="#styling">Using custom styling</a></li>
     <li><a href="#async">Using async content</a></li>
     <li><a href="#popover">Using a popover instead of a tooltip</a></li>
+    <li><a href="#inline">Using in inline form</a></li>
   </ul>
 </div>
 
@@ -205,3 +206,18 @@
   {{code-snippet name='popover.hbs'}}
 
 </div>
+
+<div class="page-content">
+  <h3 id="inline">Using in inline form</h3>
+
+{{!-- 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'}}
+
+</div>

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