Tooltips – Smallipop

[one_fourth][accordiongroup][accordion title=”Features Default”][sidenav][sideitem link=””]Grid[/sideitem][sideitem link=””]Navigation[/sideitem][sideitem link=””]Buttons[/sideitem][sideitem link=””]Forms[/sideitem][sideitem link=””]Typography[/sideitem][/sidenav][/accordion][accordion title=”Javascript Features”][sidenav][sideitem link=””]Clearing[/sideitem][sideitem link=””]Dropdown[/sideitem][sideitem link=””]Joyride[/sideitem][sideitem link=””]Magellan[/sideitem][sideitem link=””]Reveal[/sideitem][sideitem link=””]Section[/sideitem][sideitem link=””]Info tooltips[/sideitem][sideitem link=””]Retina Icons – Font Awesome[/sideitem][sideitem link=””]Tooltips – Smallipop[/sideitem][/sidenav][/accordion][/accordiongroup][/one_fourth]


Tooltips are a quick way to provide extended information on a term or action on a page.

Building With HTML Classes

Tooltips work cross browser and cross platform and are easily added to a page with a simple markup and class structure. You can apply the has-tip class to any element.

By default, the tooltip takes the width of the element that it is applied to, but you can override this behavior by applying a data-width attribute to the target element. The tooltip takes on the content of the targets title attribute.

The tooltips can be positioned on the “tip-bottom”, which is the default position, “tip-top” (hehe), “tip-left”, or “tip-right” of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.
[alert color=”success” ]Remember: This tooltips with external link are not working on touch devices.[/alert]
Available class options:
tip-top: Align the tip above the element you attach it to.
tip-bottom: Align the tip below the element you attach it to.
tip-left: Align the tip to the left the element you attach it to.
tip-right: Align the tip to the right the element you attach it to.

[panel type=”black” title=”Smallipop – A versatile jQuery plugin for displaying beautiful tooltips and interactive tours” size=”12″ ][tooltip color=”smallipop” text=”Tooltip-style 1″ ]Style 1 Tooltip[/tooltip][tooltip color=”smallipopBlue” text=”Tooltip-style 2″ ]Style 2 Tooltip[/tooltip][tooltip color=”smallipopBlack” text=”Tooltip-style 3″ ]Style 3 Tooltip[/tooltip][tooltip color=”smallipopWhite” text=”Tooltip – style 4″ ]Style 4 Tooltip[/tooltip][tooltip color=”smallipopOrange” text=”Tooltip – style 5″ ]Style 5 Tooltip[/tooltip][/panel][/three_fourth]

1 comment on “Tooltips – Smallipop”

Leave A Reply

Your email address will not be published. Required fields are marked *

We are open for Business. Please contact 919-832-0500

COVID-19 Response Update