Tooltip Styles

Tooltip Primary - Top

                        <button type="button" class="tooltip" role="tooltip" data-tooltip-content="This is an example of a tool tip" data-tooltip-position="top"></button>

Tooltip - Top

                        <button type="button" class="tooltip" role="tooltip" data-tooltip-content="This is an example of a tool tip" data-tooltip-position="top"></button>

Tooltip - Bottom

                        <button type="button" class="tooltip" role="tooltip" data-tooltip-content="This is an example of a tool tip" data-tooltip-position="bottom"></button>

Tooltip - Left

                        <button type="button" class="tooltip" role="tooltip" data-tooltip-content="This is an example of a tool tip" data-tooltip-position="left"></button>

Tooltip - Right

                        <button type="button" class="tooltip" role="tooltip" data-tooltip-content="This is an example of a tool tip" data-tooltip-position="right"></button>

Tooltip - text example

Are you a local or international student? 

                        <a href="#" class="tooltip" role="tooltip" data-tooltip-content="This is an example of a tool tip" data-tooltip-position="top">Text example</a>

Tooltip Documentation

Use

Add the content of the tooltip to data-tooltip-content attribute

To set the position of the tooltip set the data-tooltip-position attribute (options: top/bottom/left/right)

Tooltip position responds based on screen size. This will overrule the position set in the data attribute.