Tooltips – Smallipop

[one_fourth][accordiongroup][accordion title=”Features Default”][sidenav][sideitem link=”http://weblusive-themes.com/monarch/grid/”]Grid[/sideitem][sideitem link=”http://weblusive-themes.com/monarch/navigation/”]Navigation[/sideitem][sideitem link=”http://weblusive-themes.com/monarch/buttons/”]Buttons[/sideitem][sideitem link=”http://weblusive-themes.com/monarch/forms/”]Forms[/sideitem][sideitem link=”http://weblusive-themes.com/monarch/typography/”]Typography[/sideitem][/sidenav][/accordion][accordion title=”Javascript Features”][sidenav][sideitem link=”http://weblusive-themes.com/monarch/clearing/”]Clearing[/sideitem][sideitem link=”http://weblusive-themes.com/monarch/dropdown/”]Dropdown[/sideitem][sideitem link=”http://weblusive-themes.com/monarch/joyride/”]Joyride[/sideitem][sideitem link=”http://weblusive-themes.com/monarch/magellan/”]Magellan[/sideitem][sideitem link=”http://weblusive-themes.com/monarch/reveal/”]Reveal[/sideitem][sideitem link=”http://weblusive-themes.com/monarch/section/”]Section[/sideitem][sideitem link=”http://weblusive-themes.com/monarch/info-tooltips/”]Info tooltips[/sideitem][sideitem link=”http://weblusive-themes.com/monarch/retina-icons-font-awesome/”]Retina Icons – Font Awesome[/sideitem][sideitem link=”http://weblusive-themes.com/monarch/tooltips-smallipop/”]Tooltips – Smallipop[/sideitem][/sidenav][/accordion][/accordiongroup][/one_fourth]
[three_fourth]

Tooltips

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 *