Scrolling gear Scrolling gear Scrolling gear
Introducing Tippy 6.0

Version 6 of Tippy, my Tooltip plugin for WordPress, has been released (Github).

I recently released the Tippy jQuery plugin (Github). Tippy for jQuery involved a near complete rewrite of the underlying javascript, adding quite a bit of flexibility not present in the older version of Tippy. Tippy 6 incorporates the new Tippy for jQuery script while offering some improvements to the code behind tippy.php.

Despite the changes, Tippy should continue to be backwards compatible. This is a big update so there will be some glitches, but on the whole people should find the upgrade to be a seamless experience. If problems are encountered, be sure to contact me or leave a comment here.

Since Tippy for WordPress uses the Tippy for jQuery script, you can learn more about how the plugin works by visiting Tippy for jQuery. Be sure to check the options – these will all work as attributes in your tooltips. Just set them as you would any other shortcode attribute:

[tippy title="Hello there" swaptitle="Swap me around" showheader="false"]I am a nifty tooltip[/tippy]

I have included here a list of the options/attributes but note that I will not keep this list up-to-date. Visit http://tippy.croberts.me/options.html to confirm the current set of attributes and their default values.

  • autoshow (false/true): If true, the tooltip or tooltips will automatically show when the page loads.
  • showtitle (false/true): Whether or not to use the title attribute in links. Good for accessibility, bad for visibility.
  • hoverpopup (true/false): If true, tooltip displays when hovering over the link. If false, tooltip displays when the link is clicked.
  • showdelay (100): Adds a slight delay before displaying the tooltip to prevent popping up tooltips when the mouse moves across the page.
  • showspeed (200): How long it takes in ms for the tooltip to fade in.
  • hidespeed (200): How long it takes in ms for the tooltip to fade out.
  • autoclose (true/false): Whether or not the tooltip should automatically close after a delay.
  • hidedelay (1000): How long it takes in ms before the tooltip begins to auto fade out.
  • container: By default, the tooltip is placed in the DOM right where you set it but if you want to use Tippy for specific positioning, you can change its parent element by specifying a CSS selector here.
  • position (‘link/mouse/css position value’): Specifies where the tooltip should be positioned. If set to link or mouse, the x and y values are automatically determined.
  • top: Useful when position set to fixed, absolute, or relative.
  • bottom: Useful when position set to fixed, absolute, or relative.
  • left: Useful when position set to fixed, absolute, or relative.
  • right: Useful when position set to fixed, absolute, or relative.
  • offsetx (10): Set a default horizontal offset for the tooltip position. Useful when position set to link or mouse.
  • offsety (10): Set a default vertical offset for the tooltip position. Useful when position set to link or mouse.
  • width: Specify a width for the tooltip. The default is set in jquery.tippy.css.
  • height: Specify a height for the tooltip. The default is set in jquery.tippy.css.
  • draggable (false/true): Allow visitors to drag the tooltip around. Useful when autoclose is false. Requires jQuery UI.
  • dragheader (true/false): If draging is enabled and this is set to true, tooltip will only be draggable from the header bar. If false, visitors can drag from any part of the tooltip.
  • anchor: Optional CSS selector specifying the link element that will trigger Tippy.
  • title: Sets the text shown on the link and in the header.
  • swaptitle: Alternate title to use when the visitor hovers over the link.
  • img: Tippy can be used with images rather than text; set img to the url of an image to display Tippy on an image.
  • swapimg: Like swaptitle, swapimg switches to an alternate image when a visitor hovers over the link.
  • href: If href is set, the Tippy link will point to this url.
  • target: Specifies the link target for the Tippy link.
  • showheader (true/false): Whether or not the tooltip should show a header.
  • headertitle: By default, the header is set to the tooltip title. With headertitle, you can set specific text for the title.
  • headerhref: If headerhref is set, the tooltip header text will be a link pointing to this url.
  • showclose (true/false): Whether or not the tooltip have a close link. Usefor for mobile devices or when autoclose is false.
  • closetext (‘close’): The text to display for the close link.
This is my objective, unbiased opinion, of course.
I am a nifty tooltip

3 Comments

  • Hi Chris,

    Wondered if you had/have a chance to look at the Tippy set-up on the page I was working on. Swapimg is working brilliantly, but the tooltip appears to only activate on the first image. I’m perplexed.

    http://theleadershipprogram.com/nes/

    Many thanks,

    - Thom

    • Thom,

      Your timing is good. I’ve been quite busy lately but am working on the plugins tonight. Hopefully will figure out the fix.

    • In this case it looks like Tippy is off the hook. In your first tooltip you include html markup – a div that adds padding – but it looks like that div never gets closed. It’s possible Tippy has done something to mangle it, but I suspect that when you added the markup you forgot to close the tag.

      Because of issues like this, I’m going to see about a way to check the contents of a tooltip to clean up any invalid nesting, but for now you can just check the contents and see if all your tags are properly closed.

Leave a comment

Your email address will not be published. Required fields are marked *