This component enables you to create a tooltip with associated text/markdown.

Params

content

Text or markdown-formatted content. Markdown formatting cheatsheet: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

glyph

Optional. Icon to show in the tooltip. By default, it is 'question-circle'

Tooltip

Tooltip with basic, text content

HTML

<div ng-controller="TooltipExampleController as ctrl" class="t-content">
    <inv-tooltip content="ctrl.textContent"></inv-tooltip>
</div>

Tooltip with custom content

Tooltip with a data object (context) and template passed in. Allowing the component to generate custom tool tips.

HTML

<div ng-controller="CustomTooltipExampleController as ctrl" class="t-content">
    <inv-tooltip content="ctrl.content"
        context="ctrl.toolTipContext"
        template="ctrl.toolTipTemplate"></inv-tooltip>
</div>

Tooltip with markdown content

Tooltip with markdown content

HTML

<div ng-controller="TooltipExampleController as ctrl" class="t-content">
    <inv-tooltip content="ctrl.markdownContent"></inv-tooltip>
</div>

Tooltip within form content

Tooltip with forms

HTML

<div ng-controller="TooltipExampleController as ctrl" class="t-content">
    <ng-form class="c-generalForm" name="formApi">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item is-required">
                <label class="has-tooltip" for="firstName">First Name
                    <inv-tooltip content="ctrl.formContentFirstName"></inv-tooltip>
                </label>
                <input id="firstName" type="text" placeholder="First Name" required name="FirstName" ng-model="FirstName">
            </div>
        </fieldset>
    </ng-form>
</div>

Tooltip with a non-default glyph

Tooltip with non-default glyph

HTML

<div ng-controller="TooltipExampleController as ctrl" class="t-content">
    <inv-tooltip content="ctrl.textContent" glyph="'plus-square'"></inv-tooltip>
</div>

Tooltip with a non-default popup position/attachment

Tooltip with non-default popup position/attachment

HTML

<div ng-controller="TooltipExampleController as ctrl" class="t-content">
    <inv-tooltip
        content="ctrl.textContent"
        popup-attachment="'top left'"
        popup-position="'bottom center'">
    </inv-tooltip>
</div>

Tooltip/Text with a non-default popup position/attachment

Text with non-default popup position/attachment

HTML

<div ng-controller="TextToolTipController as ctrl" class="t-content">
    <inv-tooltip content="ctrl.content"
                 context="ctrl.toolTipContext"
                 tooltip-text="ctrl.tooltipText"
                 template="ctrl.toolTipTemplate"></inv-tooltip>
</div>