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.
{panel-white} {list | type3} {listing}{icon | fa-caret-right}Works perfect on {tooltip | # | Mobile devices are smartphones like the iPhone or the Android | top | mobile devices}, first tap to open, second to link{/listing} {listing}{icon | fa-caret-right}Also you can control where the Tooltip appears, choose from left or right, top, bottom or auto{/listing} {listing}{icon | fa-caret-right}Tooltip View is made with CSS3 only so no images are to load{/listing} {/list} {/panel}{icon | fa-flask templatecolor}Demo
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus {tooltip | # | Tooltip with Class top | top | 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. {tooltip | # | Tooltip with Class top | top | Curabitur} blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur {tooltip | # | Tooltip with Class bottom | bottom | 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. Yeah, this can be nullam {tooltip | # | Of course, the tooltip can also be really large and can include many many text like in this example - but for sure, it's not needed and handled by your own phantasie and creativity you know! Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. | top | 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 | # | Tooltip with Class top | top | Tooltip Top} | {tooltip | # | Tooltip with Class bottom | bottom | Tooltip Bottom} | {tooltip | # | Tooltip with Class left | left | Tooltip Left} | {tooltip | # | Tooltip with Class right | right | Tooltip Right} | {tooltip | # | Tooltip with Class auto, direction is choosen automatic | auto | Tooltip Auto}
{button-data | btn-primary has-tipsy-top | # | Tooltip as a Button | title="Wow, this Tooltip can also be displayed at a Button"} {button-data | btn-warning has-tipsy-top | # | Tooltip as a Button | title="Wow, this Tooltip can also be displayed at a Button"} {button-data | btn-success has-tipsy-top | # | Tooltip as a Button | title="Wow, this Tooltip can also be displayed at a Button"}
{icon | fa-question-circle templatecolor}How to use
You can use this Shortcodes everywhere in your content, click here to find out more.
{tooltip | your Link | Place here Content of the Tooltip | Position (left, right, top, bottom, auto) | Word for Tooltip}
{tooltip | # | I'm a Tooltip | top | Tooltip} = {tooltip | # | I'm a Tooltip | top | Tooltip}
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!
{toggle | Familiar with Basic HTML?}Simple Button Tooltip on Top
<a href="#" class="btn 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
{/toggle}