1. Installation of eXtroTips
In the Joomla-Backend, click on Extensions -> Install, then select the plugin zip file and click on 'Upload & Install'. After successful installation, you can configure the plugin by clicking on Extensions -> Plugins.
2. How to create a tooltip
To create a CSS3 tooltip with eXtroTips, just add the following tag to your Joomla article:
{extrotips link=URL|text=LINK-TEXT|tip=TOOLTIP|title=TITEL|class=CLASSES}
- URL = a link to which the user should be redirected (optional)
- LINK-TEXT = The text for your link
- TOOLTIP = Your Tooltip
- TITEL = a title for your Tooltip (optional)
- KLASSEN = CSS-classes for color, position etc of your tooltip, see below
The following classes are predefined:
Tooltip width:
- wi50: 50px
- wi100: 100px
- wi150: 150px
- wi200: 200px
- wi250: 250px
- wi300: 300px
- wi350: 350px
- wi400: 400px
Tooltip color:
- grey
- yellow
- blue
- navy
- pink
- green
- white
- black
- sunflower
Position:
- bottom: below the link
- top: above the link
Fade-in-effects*:
- n2s: 'north to south', from top to bottom
- ne2sw: 'northeast to southwest', from top right to bottom left
- e2w: 'east to west', from right to left
- se2nw: 'southeast to northwest', from bottom right to top left
- s2n: 'south to north', from bottom to top
- sw2ne: 'southwest to northeast', from bottom left to top right
- w2e: 'west to east', from left to right
- nw2se: 'northwest to southeast', from top left to bottom right
Example:
{extrotips link=http://www.google.com|text=google|tip=example: google|class=blue bottom wi200 nw2se|title=Google} **
* The position top (above the link) supports only e2w or w2e as fade-in-effect.
** Please note the pipe symbol ( | ) to separate the options.
Please note:
You should always switch to HTML source code view in your editor (eg TinyMCE) to add plugin tags, otherwise the tag might get altered by the editor and the plugin cannot create the tooltip correctly.
Visit our shop for more high quality Joomla eXtensions.
2024-11-01