Tooltip

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>

Title Example

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>

Custom Example

Tooltips can have custom content as well using the smeTooltip and smeTooltipContext attribute instead.

This is a custom tooltip. It even has a link to {{data.linkText}}
Also, it's a multiple line tooltip.
<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>