The tooltip directives work in conjunction with the
sme-tooltip-host
component. This component should be generally use in the root component of your project after all of your application
content.
... application content ...
<sme-tooltip-host></sme-tooltip-host>
The tooltip directive automatically applies itself when you use the standard
[title]
attribute. Not that if the attribute is not bound with '[]' the native tooltip may still appear in addition
to the styled one. If you want to use only the native tooltip, then bind to
[attr.title]
instead.
<button [title]="'This is a tooltip'">Hover Over Me</button>
Tooltips can have custom content as well using the
smeTooltip
and
smeTooltipContext
attribute instead.
<button [smeTooltip]="template" [smeTooltipContext]="{{'{'}} linkText: 'Microsoft Bing', link: 'www.bing.com' }">Hover Over Me</button>
<ng-template #template let-data>
<p>
This is a custom tooltip. It even has a link to <a class="sme-link" target="about:blank" [href]="data.link">{{'{'}}{{'{'}}data.linkText}}</a>
</p>
</ng-template>