Tooltips and popovers

Override default browser tooltips by using tooltips or popovers to display additional information on UI elements.

Tooltip

Tooltips rely on mouse interaction, because of this they won't work in touch devices.

Available in four directions. Refer to Angular UI Bootstrap's Tooltip for usage.

<i c8y-icon="bell"
    uib-tooltip="ACTIVE"
    tooltip-placement="right"
    tooltip-append-to-body="true"
></i>
  

Popover

Add small overlays of content to any element for displaying secondary information.

Refer to Angular UI Bootstrap's Popover for usage.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

<a tabindex="0"
    uib-popover-html="'<h5>Supports html</h5>'"
    popover-append-to-body="true"
    popover-placement="right"
    popover-trigger="'focus'" >
    <i class="fa fa-question-circle"></i>
</a>