»Joomla Extensions«

...my extensions i've made for Joomla! CMS...

MrNicePage Tooltips Plugin J1.5

MrNicePage Tooltips Plugin is a Joomla 1.5 native tooltip plugin with enormous flexibility. Here you will find some examples on how to use MNP Tooltips Plugin and a short documentation.

You can simply use the plugin by placing {mnptooltip="Tooltip Text"} around the text of your choice {/mnptooltip}. This way, the default CSS-stylesheets that you can easily change in the Joomla Backend will be used.

Using the plugin is not restricted to plain text, you can also create tooltips for HTML code. Furthermore you can give each tooltip an individual style by overriding the standard CSS-stylesheets. Just extend the tooltip-tag the following way:

{mnptooltip="Tooltip Text 2",[TITLE,'mytitle',BGCOLOR,'#ffffff']}Text of your choice{/mnptooltip}

Below there is a list of all available commands you can use to override the standard CSS-stylesheets:

  • ABOVE,false // false or true - tooltip above mousepointer
  • BGCOLOR,'#E2E7FF' // Background colour (HTML colour value, in quotes)
  • BGIMG,'picture.png' // Path to background image, none if empty string ''
  • BORDERCOLOR,'#003099'// Color of the tooltip-border
  • BORDERSTYLE,'solid' // Any permitted CSS value, but I recommend 'solid', 'dotted' or 'dashed'
  • BORDERWIDTH,1 // Width of the tooltip-border
  • CENTERMOUSE,false // false or true - center the tip horizontally below (or above) the mousepointer
  • CLICKCLOSE,false // false or true - close tooltip if the user clicks somewhere
  • CLICKSTICKY,false // false or true - make tooltip sticky if user left-clicks on the hovered element while the tooltip is active
  • CLOSEBTN,false // false or true - closebutton in titlebar
  • CLOSEBTNCOLORS,['#990000', '#FFFFFF', '#DD3333', '#FFFFFF'] // [Background, text, hovered background, hovered text] - use empty strings '' to inherit title colours
  • CLOSEBTNTEXT,' X ' // Close button text (may also be an image tag)
  • COPYCONTENT,true // When converting a HTML element to a tooltip, copy only the element's content, rather than converting the element by its own
  • DELAY,400 // Time span in ms until tooltip shows up
  • DURATION,0 // Time span in ms after which the tooltip disappears; 0 for infinite duration, < 0 for delay in ms after the onmouseout until the tooltip disappears
  • EXCLUSIVE,false // false or true - no other tooltip can appear until the current one has actively been closed
  • FADEIN,100 // Fade-in duration in ms, e.g. 400; 0 for no animation
  • FADEOUT,100 // Fade-out duration in ms, e.g. 400; 0 for no animation
  • FADEINTERVAL,30 // Duration of each fade step in ms (recommended: 30) - shorter is smoother but causes more CPU-load
  • FIX,null // Fixated position, two modes. Mode 1: x- an y-coordinates in brackets, e.g. [210, 480]. Mode 2: Show tooltip at a position related to an HTML element: [ID of HTML element, x-offset, y-offset from HTML element], e.g. ['SomeID', 10, 30]. Value null (default) for no fixated positioning.
  • FOLLOWMOUSE,true // false or true - tooltip follows the mouse
  • FONTCOLOR,'#000044' // Color of the font
  • FONTFACE,'Verdana,Geneva,sans-serif'
  • FONTSIZE,'8pt' // E.g. '9pt' or '12px' - unit is mandatory
  • FONTWEIGHT,'normal' // 'normal' or 'bold';
  • HEIGHT,0 // Tooltip height; 0 for automatic adaption to tooltip content, < 0 (e.g. -100) for a maximum for automatic adaption
  • JUMPHORZ,false // false or true - jump horizontally to other side of mouse if tooltip would extend past clientarea boundary
  • JUMPVERT,true // false or true - jump vertically "
  • LEFT,false // false or true - tooltip on the left of the mouse
  • OFFSETX,14 // Horizontal offset of left-top corner from mousepointer
  • OFFSETY,8 // Vertical offset
  • OPACITY,100 // Integer between 0 and 100 - opacity of tooltip in percent
  • PADDING,3 // Spacing between border and content
  • SHADOW,false // false or true
  • SHADOWCOLOR,'#C0C0C0'// Color of the shadow
  • SHADOWWIDTH,5 // Width of the shadow
  • STICKY,false // false or true - fixate tip, ie. don't follow the mouse and don't hide on mouseout
  • TEXTALIGN,'left' // 'left', 'right' or 'justify'
  • TITLE,'' // Default title text applied to all tips (no default title: empty string '')
  • TITLEALIGN,'left' // 'left' or 'right' - text alignment inside the title bar
  • TITLEBGCOLOR,'' // If empty string '', BorderColor will be used
  • TITLEFONTCOLOR,'#FFFFFF' // Color of title text - if '', BgColor (of tooltip body) will be used
  • TITLEFONTFACE,'' // If '' use FontFace (boldified)
  • TITLEFONTSIZE,'' // If '' use FontSize
  • TITLEPADDING,2 // Padding of the tooltip-title
  • WIDTH,200 // Width of the Tooltip

The plugin uses wz_tooltips Javascript Library made by Walter Zorn (http://www.walterzorn.de)

Download: MNP Tooltips Plugin 1.1