PCUI

Normal

An element can specify popup content to appear

data-content="tooltip message"

Copied successfully!

<span data-content="standard tooltip">
	<i class="fa fa-info-circle fa-2x"></i>
</span>
<span data-content="exclamation-triangle">
	<i class="fa fa-exclamation-triangle fa-2x"></i>
</span>
<span data-content="lock">
	<i class="fa fa-lock fa-2x"></i>
</span>

Copied successfully!


                                _initTooltip(); "This function will initialize the tooltip"

Titled

An element can specify popup content with a title

data-title="Tooltip title"

Copied successfully!

<span data-content="standard tooltip" data-title="Fontawesome">
	<i class="fa fa-info-circle fa-2x"></i>
</span>
<span data-content="exclamation-triangle" data-title="Fontawesome">
	<i class="fa fa-exclamation-triangle fa-2x"></i>
</span>
<span data-content="lock" data-title="Fontawesome">
	<i class="fa fa-lock fa-2x"></i>
</span>

Copied successfully!


                                _initTooltip(); "This function will initialize the tooltip"

Size

A popup can vary in size

data-variation="size"

Copied successfully!

<span data-content="fa-user-circle" data-title="mini" data-variation="mini"><i class="fa fa-user-circle fa-2x"></i></span>
<span data-content="fa-user-circle" data-title="tiny" data-variation="tiny"><i class="fa fa-user-circle fa-2x"></i></span>
<span data-content="fa-user-circle" data-title="small" data-variation="small"><i class="fa fa-user-circle fa-2x"></i></span>
<span data-content="fa-user-circle" data-title="large" data-variation="large"><i class="fa fa-user-circle fa-2x"></i></span>
<span data-content="fa-user-circle" data-title="huge" data-variation="huge"><i class="fa fa-user-circle fa-2x"></i></span>

Copied successfully!


                                _initTooltip(); "This function will initialize the tooltip"

Positioning

A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.

data-position="position"

Copied successfully!

<button class="ui button button-solid-large" data-tooltip="Top Left" data-position="top left">Top Lef</button>
<button class="ui button button-solid-large" data-tooltip="Top Center" data-position="top center">Top Center</button>
<button class="ui button button-solid-large" data-tooltip="Top Right" data-position="top right">Top Right</button>
<button class="ui button button-solid-large" data-tooltip="Bottom Left" data-position="bottom left">Bottom Left</button>
<button class="ui button button-solid-large" data-tooltip="Bottom Center" data-position="bottom center">Bottom Center</button>
<button class="ui button button-solid-large" data-tooltip="Bottom Right" data-position="bottom right">Bottom Right</button>
<button class="ui button button-solid-large" data-tooltip="Right center" data-position="right center">Right center</button>
<button class="ui button button-solid-large" data-tooltip="Left center" data-position="left center">Left center</button>

Copied successfully!


                                _initTooltip(); "This function will initialize the tooltip"

ToolTip