+ {{code-snippet name='basic-usage.hbs'}} -
-
-
-
- - {{#test-component data-test='in-component-and-block'}} - {{#tooltip-on-parent}} - Using a component in the template - {{/tooltip-on-parent}} - Hover over me - {{/test-component}} - - -
- - {{#test-component data-test='in-component-and-block-htmlbars'}} - {{#tooltip-on-parent}} - {{#link-to 'index'}}Using HTMLBars{{/link-to}} in content - {{/tooltip-on-parent}} - Hover over me - {{/test-component}} - - -
- - {{#test-component data-test='in-component-and-inline'}} - {{tooltip-on-parent - content='Using a component in the template' - }} - Hover over me - {{/test-component}} - - -
-
-
-
- - {{#test-component - tooltipContent='This shows on a click event, then hides' - tooltipEvent='click' - data-test='auto-close-basic' - tooltipDuration=2000 - }} - Click me - {{/test-component}} - - -
- - {{#test-component data-test='auto-close-component'}} - {{#tooltip-on-parent duration='1000' event='mouseenter'}} - Using a component with duration set - {{/tooltip-on-parent}} - Hover over me - {{/test-component}} - - -
-
- {{#test-calling-component}}
- - Click me -- {{/test-calling-component}} -
-
-
- - {{input - type='text' - data-test='auto-close-input' - tooltipEvent='focus' - tooltipContent='Auto-closing tooltip on {{input}}' - tooltipDuration='1000' - placeholder='Focus field' - }} - - -
Please note: you must set tooltipEvent='manual'
on the component to set visbility manually.
-
-
-
- - {{#test-component - tooltipContent='This is a manually triggered tooltip' - tooltipEvent='manual' - tooltipVisibility=showTooltip - data-test='manually-trigger' - }} - Manual tooltip - {{/test-component}} - - {{input type="checkbox" checked=showTooltip}} Show - - -
- - {{#test-component data-test='manually-trigger-component'}} - {{#tooltip-on-parent - event='manual' - visibility=showComponentTooltip - }} - Manually triggering a component tooltip - {{/tooltip-on-parent}} - Manual tooltip as component - {{/test-component}} - - {{showComponentTooltip}} - - {{input type="checkbox" checked=showComponentTooltip}} Show - - -
Please note: you must call this.renderChildTooltips()
on the parent view or component to render the tooltip.
-
-
-
-
- {{#test-calling-component}}
- - Hover over me -- {{/test-calling-component}} -
-
-
-
-
-
- - {{test-component - tooltipContent='This is a tooltip on an inline component' - data-test='on-inline-component' - }} - - -
- - {{#test-component - tooltipContent='Debugging' - action='debugging' - }} - Should disappear on route transition - {{/test-component}} - - -
- - {{#test-component - tooltipContent='This shows on a click event' - tooltipEvent='click' - data-test='showing-on-click' - }} - Click me - {{/test-component}} - - -
- - {{#test-component - tooltipContent='This is a tooltip on a block component' - data-test='on-block-component' - }} - Custom 'tooltip-error' class - {{/test-component}} - - -
- - {{#link-to 'index' - tooltipContent='This is a tooltip on a link-to helper' - class='inline-block' - data-test='on-link-to' - }} - On link to - {{/link-to}} - - -