Tooltip

This awesome Template comes with nice styled included tooltips for your own use. Many features, options and styles combined with an easy to use shortcode system for the developer make this tooltip to a new experience in content styling for the sophisticated user of joomla. See the full feature list, the demo and the usage above.

Demo

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus scelerisque ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor.

Tooltip Top | Tooltip Bottom | Tooltip Left | Tooltip Right | Tooltip Auto

Tooltip as a Button   Tooltip as a Button   Tooltip as a Button

How to use

You can use this Shortcodes everywhere in your content, click here to find out more.

Attention: you always must write the position like top or bottom in lowercases, maybe TOP will produce an error and the tooltip won't work!

• Familiar with Basic HTML?

  Simple Button Tooltip on Top <a href="#" class="small button has-tipsy-top" title="Content for the Tooltip here">Button Text here<a> Simple Link with Icon and Tooltip on Bottom <a href="#" class="has-tipsy-bottom" title="Content for the Tooltip here"><i class="icon-name"></i>Link Text here<a> Simple Image with Tooltip on Auto Position <a href="#" class="has-tipsy-auto" title="Content for the Tooltip here"><img src="/your-image.jpg" alt="Alternative Text here" /><a> You will see, simply add the Class 'has-tipsy-top (or another value)' to your Link and the Content will open in a Tooltip