tooltip Buy Now$19

This is a Joomla/Javascript plugin that is aimed to provide developers custom tooltips that are beautiful, powerful & extensible. It is pretty lightweight too & Simple enough for everyone, powerful enough for everything.

Perfect positioning

This tooltip has a powerful yet elegant positioning system. It will automatically keep tooltips within the viewport.

DEMO


SHORTCODE

DETAILS OF THE CODE -----# TOP #-----
[batip link='Hover me!' content='Tooltip content!' position='top']
-----# TOP-START #-----
[batip link='Hover me!' content='Tooltip content!' position='top-start']
-----# TOP-END #-----
[batip link='Hover me!' content='Tooltip content!' position='top-end']
-----# RIGHT #-----
[batip link='Hover me!' content='Tooltip content!' position='right']
-----# RIGHT-START #-----
[batip link='Hover me!' content='Tooltip content!' position='right-start']
-----# RIGHT-END #-----
[batip link='Hover me!' content='Tooltip content!' position='right-end']
-----# BOTTOM #-----
[batip link='Hover me!' content='Tooltip content!' position='bottom']
-----# BOTTOM-START #-----
[batip link='Hover me!' content='Tooltip content!' position='bottom-start']
-----# BOTTOM-END #-----
[batip link='Hover me!' content='Tooltip content!' position='bottom-end']
-----# LEFT #-----
[batip link='Hover me!' content='Tooltip content!' position='left']
-----# LEFT-START #-----
[batip link='Hover me!' content='Tooltip content!' position='left-start']
-----# LEFT-END #-----
[batip link='Hover me!' content='Tooltip content!' position='left-end']

Display anything

This tooltip can display anything from simple snippets of text to custom designed tooltips. With build in Ajax support and a powerful Javascript API, It covers pretty much every usecase when it comes to tooltips.

DEMO


SHORTCODE

DETAILS OF THE CODE -----# SIMPLE TEXT #-----
[batip link='Hover me!' content='A simple text based tooltip!']
-----# HTML ELEMENTS #-----
[batip link='Hover me!' content='<i>HTML Tags</i> insert here!']
-----# VIDEO/AUDIO #-----
[batip link='Hover me!' content='<video width="400" src="videos/mov_bbb.mp4" controls></video>']
-----# YOUTUBE #-----
[batip link='Click me!' content='https://youtube.com/watch?v=MF3Vbq2BPbE' type='youtube' trigger='click']
-----# VIMEO #-----
[batip link='Click me!' content='https://vimeo.com/1949449' type='vimeo' trigger='click']
-----# GOOGLE MAP #-----
<!--
Use parameters in place mode: https://developers.google.com/maps/documentation/embed/embedding-map#place_mode
-->
[batip link='Click me!' content='key=YOUR-KEY&q=Space+Needle,Seattle+WA' type='gmap' trigger='click']
-----# JOOMLA MODULE #-----
[batip link='Hover me!' content='id16' type='module']
-----# JOOMLA ARTICLE #-----
[batip link='Hover me!' content='id1' type='article']
-----# EXTERNAL URL #-----
[batip link='Hover me!' content='https://bestaddon.com' type='external']

Gallery

You can use the Tooltip to show a simple gallery...

DEMO

SHORTCODE

-----# GALLERY #-----
[batip  content='/images/banners' type='gallery' galleryCols='sm-1, md-2, lg-3']

Beautiful skins

Tooltips are created entirely with CSS so they can easily be customized to any design. To get you started It comes with a number of beautiful skins that'll work great with your websites.

DEMO


SHORTCODE

DETAILS OF THE CODE -----# DEFAULT #-----
[batip link='Hover me!' content='A simple text based tooltip!']
-----# RED #-----
[batip link='Hover me!' content='Tooltip content!' style='{"background": "#e11"}']
-----# GREEN #-----
[batip link='Hover me!' content='Tooltip content!' style='{"background": "#00a300"}']
-----# BLUE #-----
[batip link='Hover me!' content='Tooltip content!' style='{"background": "#2d89ef"}']
-----# LIGHT #-----
[batip link='Hover me!' content='Tooltip content!' style='{"background": "#e7ebf0", "color":"#333"}']
-----# PURPLE #-----
[batip link='Hover me!' content='Tooltip content!' style='{"background": "#9f00a7"}']
-----# ORANGE #-----
[batip link='Hover me!' content='Tooltip content!' style='{"background": "#e38b1a"}']
-----# LINEAR GRADIENT #-----
[batip link='Hover me!' content='Tooltip content!' style='{"background": "linear-gradient(90deg,#05d1cf 0%,#e74c8d 100%)"}']
-----# RADIAL GRADIENT #-----
[batip link='Hover me!' content='Tooltip content!' style='{"background": "radial-gradient(circle,#d10566 0%,#f9cc38 100%)"}']

Animations

Getting more advanced, you can use actual CSS animations (@keyframes rules), for example using the animate.css package

DEMO

And a lot more... animate.css

SHORTCODE

DETAILS OF THE CODE -----# BOUNCE #-----
[batip link='Hover me!' content='Tooltip content!' animate='bounce']
-----# FLASH #-----
[batip link='Hover me!' content='Tooltip content!' animate='flash']
-----# PULSE #-----
[batip link='Hover me!' content='Tooltip content!' animate='pulse']

Triggers

Tooltips can also be triggered by click or Hover events.

DEMO


SHORTCODE

DETAILS OF THE CODE -----# HOVER #-----
[batip link='Hover me!' content='Tooltip content!']
-----# CLICK #-----
[batip link='Click me!' content='Tooltip content!' trigger='click']

Options

It offers a wide array of options to fine-tune tooltips exactly to your needs. It even comes with build in presets for common tooltip usecases, making it very easy to use.

DEMO


SHORTCODE

DETAILS OF THE CODE -----# DELAY #-----
[batip link='<img src="icon.png" />Hover me!' content='Tooltip content!' delay='500']
-----# CUSTOM WIDTH #-----
[batip link='<img src="icon.png" /> Hover me!' content='Tooltip content!' style='{"width":"400px"}']
-----# DURATION #-----
[batip link='<img src="icon.png" />Hover me!' content='Tooltip content!' speed='900ms']
-----# FOLLOW CURSOR #-----
[batip link='<img src="icon.png" />Hover me!' content='Tooltip content!' alignTo='cursor']
-----# LARGE ARROW #-----
[batip link='<img src="icon.png" />Hover me!' content='Tooltip content!' spacer='20px']
-----# X-SMALL ARROW #-----
[batip link='<img src="icon.png" />Hover me!' content='Tooltip content!' spacer='6px']
-----# DISABLE ARROW #-----
[batip link='<img src="icon.png" />Hover me!' content='Tooltip content!' spacer='0']