Tips

Visual colors, and visual messages.

Simple tip on hover

<a href="#" data-fc-modules="tip" data-fc-content="this is the content of the tip" class="icon-info-circle"> Tip</a>

Html tip on hover

Tip
Html tip
<a href="#" data-fc-modules="tip" data-fc-content="#html-tip" class="icon-info-circle"> Tip</a>
<div class="d-n">
    <div id="html-tip">
        <img src="../static/img/chuck.jpg" class="image-circle" width="50" />
         Html tip
    </div>
</div>

Tip on click with close on click

<a href="#" data-fc-modules="tip" data-fc-content="this is the content of the tip" data-fc-trigger="click" class="icon-info-circle"> Tip</a>

Interactive tip

<a href="#" data-fc-modules="tip"  data-fc-interactive="true" data-fc-content="<input type='text' placeholder='enter text here' />" class="icon-info-circle"> Tip</a>

Attributes

data-fc-content

String with the text content of the tooltip

data-fc-position

String with the text title of the tooltip. Possible values: right, left, top, top-right, top-left, bottom, bottom-right, bottom-left

DEFAULT: bottom

data-fc-trigger

Set how tooltips should be activated and closed.

DEFAULT: hover

data-fc-interactive

If it's set to true allows user to interact the tip.

DEFAULT: false