Clicky

Advanced ToolTips for RapidWeaver
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Advanced ToolTips for RapidWeaver

ToolTips – those boring-looking grey boxes that appear under a text link when it has a description text. Well, they no longer need to look boring, they can now be any colour you wish and the can even contain text, images and links! Jeroen of Marathia's Stacks has just released a two stack set which will allow you to customise your ToolTips to look just as you want them.

TippyTitle will turn any title tags into styled tooltips. Red, green, blue; above, or below your tagged text; with, or without a pointer and just about any size that you want. You even get a choice of fifteen different cursors and the tooltip can appear either on hover, or when the linked item is clicked.

TippyPlus allows you to have an info panel open when your linked item is hovered or clicked. The Info Panel can contain just about anything you wish and, depending on the size of your content, can even cover the screen.

And that's not all. The two stacks can be combined and configured so that on hover, you see the tooltip and on click, your info panel will open.

So how does it all work?
Well, TippyTitle is extremely simple to set up. Select the word that you wish to add a tooltip to, click the Add Link button and, in the URL panel – next to Text – add your tooltip text.
You can now take a look at the stack setup panel and configure your tooltip to look exactly as you want it.

TippyPlus is very slightly more complicated to set up. By default it is configured to open your info panel when the stack content is hovered – which is great if you want to add a tooltip to a button, an image or a text snippet – in which case the stack displays two containers – one for your linked content and one for your info stacks.
If you wish to have TippyPlus to open when a word is hovered, don't drop your text stack into the Tippy Plus stack, bet set the stack to 'custom selector'. You'll then need to select the word in question, open the URL panel, add Javascript:void(0) to the URL and then add a unique ID for the active text.. If you also add a description in the Title panel and drop the text stack into a TippyTitle stack the description will be displayed.

As simple as the stacks are, there is a whole online manual describing the various setup possibilities. The manual is well worth taking a look at as the Tippy stacks are a lot more versatile than the stack settings would lead you to believe.


The first image above shows TippyTitle in action. The second image displays a TippyPlus info panel when the same link is clicked.

Stack Settings
TippyTitle
Tooltip for: – Every element with a title tag within this stack, This stack, An element with a custom selector on this page
Keep elements on one line – deactivated by default
Show – On hover, On click
Tooltip size – Small, Regular, Big
Align text – Left, Centre, Right, Justified
Cursor style – 15 options
Flip – Display tooltip on the opposite side when no room is available to display
Distance – px
Offset – x, y axes
Animation – 5 options
Delay – Show, Hide, ms
Duration – Show, Hide, ms
Inertia – Modifies the transition
Show Arrow – Deactivated by default
Width – Tooltip Width – % or px
Custom Settings – Deactivated by default – Black tooltip, White text
When Custom Settings is activated the tooltip may be customised
Custom font size – deactivated by default
Bold, Italic
Font Family – Theme, Web Safe, Custom
Custom text colour
Use text shadow

The TippyPlus setup panel is almost identical, but includes custom colours for Text, Link, Link underline.

TippyTitle is ideal if you need to add explanatory text to words, links, or even a complete panel of content.
TippyPlus takes tooltips to a whole new level!

blog comments powered by Disqus
  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

Don’t miss a post!
Sign up for our monthly newsletter.

A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.