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
YoutubeClick
here to show video!
VimeoClick
here to show video!
Google
MapClick here to show map!
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']