Scrolling gear Scrolling gear Scrolling gear
Centering a Tooltip similar to Lightbox

Tippy’s various options and attributes allows a lot of behavior that may not be immediately obvious. One thing you can do using a combination of options is make a tooltip pop up in the . The mechanism behind this is not completely straightforward, so read on for how to do it.

The tooltip itself uses a few extra attributes: container, position, width, and height. Width and height are optional, but we need to know how tall and wide our element will be in order to position it in the center.

[tippy title="center of the screen" container="#centerme" position="absolute" width="300" height="200"]I should be in the center[/tippy]

Notice that it expects to go in a div with the id centerme (container=”#centerme”) – when specifying the container, be sure to use the full CSS selector. In my case, #centerme is just an empty div.

<div id="centerme"></div>

The div does need some styling in order to give it the size and position I want. The style can be specified inline using style=”whatever” but I went ahead and added a style element for appearance sake:

<style type="text/css">
	#centerme {
		width: 300px;
		height: 1px;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -150px;
		margin-top: -100px;
		z-index: 100;
	}
</style>

Notice that I gave it a height of 1px. Since the container contents can overflow, there’s no reason to make it tall. Because the div will cover anything under it (it’s transparent but will intercept clicks, etc), it’s good to keep it small so that it won’t interfere with other user actions. With an upcoming version of Tippy, you could also use the new callon/calloff attributes to call a JavaScript function when the tooltip displays and hides to show/hide your container.

I have mine in fixed position so it stays in place when the user scrolls. Style yours however you wish.

We want the tooltip to be centered to the center of the screen, not to the center of our current container. The best way to do this is to make #centerme a child of the document’s body element. A bit of jQuery will take care of that:

<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('#centerme').appendTo('body');
	});
</script>

One gotcha when moving the tooltip. Right now Tippy is a child element inside your post container. This means the Tippy styling will match whatever css you’ve applied to the post. When Tippy gets moved to a different container (in this case, #centerme), it will inherit that container’s styling. Since my #centerme element is a child of body and has very little default styling, you’ll notice that its contents are styled differently than my post contents. You can work around that by adding a class to the tooltip and include that class in your css rules, or just give centered tooltips their own styling.

All of this can go inside your post. Because WordPress likes to paragraph-break anything separated by a line break, I have everything smushed together. Here’s what it looks like at the end of this post:

<style type="text/css">
	#centerme {
		width: 300px;
		height: 1px;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -150px;
		margin-top: -100px;
		z-index: 100;
	}
</style>
<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('#centerme').appendTo('body');
	});
</script>
<div id="centerme"></div>

Adding a lightbox-type effect to Tippy is one of those features I might add in the future, making it easy to do without having to add all of this to your post. In the meantime, you can do it yourself and this post demonstrates that with a little creativity, Tippy provides a lot of flexibility.

I should be in the center
Tippy 6.2.0 and Alternate Triggers

Tippy 6.2.0 adds another attribute to the Tippy toolbox: alttrigger. Use alttrigger when you want an element other than the default Tippy link to trigger the Tippy tooltip.

Set alttrigger to the CSS element you want to target. It can be a class or an id but be sure to include . or # accordingly. When you specify a trigger, it can match multiple elements meaning you can have multiple triggers for a tooltip. Here are some examples.

First, to start things off.

[tippy title="a simple tooltip" alttrigger=".altdemo"]I'm just here to demonstrate the way alttrigger works.[/tippy]
This is a div. It has class=”altdemo” so mousing over it should trigger the above tooltip.

Link with altdemo class

And an image:

Yep, altdemo

Note also that the elements match whatever kind of trigger is set on the shortcode. If it is set to show on hover, the alternate elements will show on hover. If it’s set for click, so will the alternates.

(Update: Tippy 6.2.1 should show up soon in the repository and will fix a bug where the tooltip would not close when leaving the alternate trigger)

I’m just here to demonstrate the way alttrigger works.
Introducing Tippy 6.1.0

Tippy 6.1.0 has just been released with big fixes and two major(ish) new features.

Autoload content

The first new feature provides a way to change how tooltip content gets loaded. By default, Tippy automatically loads tooltip content when the page loads. The content is hidden from the user until they mouse over the tooltip, but it ensures that everything is ready to display without having to wait for images and such to load. This could cause a problem if you have something like a Youtube video that you want to autoplay when the tooltip is open. By automatically loading the content, any autoplay media will start playing after the page loads even if the tooltip is not displaying.

Tippy 6.1.0 provides two ways to fix this problem.

  1. You can change it site-wide under the Tippy settings page by unchecking the “Autoload Content” setting.
  2. You can also change it per-tooltip with the htmlentities attribute. If you set htmlentities=”true” then Tippy will convert the content to htmlentities which prevents it from autoloading. In other words, htmlentities=”true” is equivalent to turning off autoload.

for an example.

[tippy title="Check out vsauce" htmlentities="true" width="610" height="330"]<iframe width="580" height="315" src="//www.youtube.com/embed/7uiv6tKtoKg?autoplay=1" frameborder="0" allowfullscreen></iframe>[/tippy]

Nested tooltips

This is the biggest update. With Tippy 6.1.0, nested tooltips have become a reality. It is possible that Peter is the only person on the planet who will find a use for this, but his use is pretty cool so now he can do it. Here’s an example:

Nifty !

The code:

[tippy title="Nested Tooltips"]This is [subtippy title="my" header="false"]I am a happy [subtippy1 title="nested tooltip" header="false"]I'm another [subtippy2 title="one" header="false"]Keep it going![/subtippy2]![/subtippy1]. Do not fear me.[/subtippy] nested tooltip demo.[/tippy]

When nesting a tooltip, use [[subtippy]] instead of [tippy]. For multiple levels, just add a number at the end: [[subtippy2 title=”My tip”]Whatever[/subtippy2]] Tippy doesn’t really care what number you use or if they are in sequence as long as they match.

One thing to keep in mind, and one gotcha:

Notice that hovering over any nested tooltip keeps the whole chain open. Because nested tooltips are inside their parent tip, hovering over the child will keep the parent open. Notice that this also means that if you drag a parent tooltip around, the child tooltips move with it.

The gotcha: for now nested tooltips will not work unless multiple tooltips are enabled in the global Tippy settings. This might change in the future.

Have fun, and let me know what you do with these!

<iframe width="580" height="315" src="//www.youtube.com/embed/7uiv6tKtoKg?autoplay=1" frameborder="0" allowfullscreen></iframe>
This is
I am a happy
I’m another
Keep it going!
!
. Do not fear me.
nested tooltip demo.
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
Git Clone Offscreen Magazine Issue 6
Offscreen Magazine Issue 6

Offscreen Magazine is an outstanding design magazine which returns the feel of paper and the smell of ink to the reading experience. With the understanding that even digital gurus need downtime, Offscreen gets readers off the screen and into an elegant and delightful visual (and ) experience.

Although Offscreen is geared toward designers, it has provided inspiration and motivation for even a grizzled coder like me. It has also been the impetus for more than a few coding sessions. Reading about the lives and projects of others gets the creative juices flowing. Offscreen does not focus on the technical details of design but looks at the day-to-day lives of individuals involved in the creative process. It can sometimes be easy to lose sight of what makes our work so enjoyable. Offscreen provides a great reminder and refresher.

With all that in mind, tonight’s tweet from @offscreenmag is a cause for excitement:

Check out the details for Issue 6 and be sure to order a copy.

Many people, including me, very much enjoy the smell of paper and ink that drifts off each page of the magazine.
Putting a PDF in a Tippy tooltip

It often surprises me to see the ways people come up with uses for Tippy. Someone recently asked about embedding a PDF in Tippy. Here is one way to do it:

The code for this is straightforward since (almost) any markup can be added inside a tooltip:

[tippy title="You should see a PDF in this tooltip" height="400" width="600" autoclose="false"]
<object data="http://croberts.me/wp-content/uploads/2013/08/decind.pdf" type="application/pdf" width="100%" height="100%">
    <p>Be sure to include an alternate download method. <a href="http://croberts.me/wp-content/uploads/2013/08/decind.pdf">The Declaration of Independence</a></p>
</object>
[/tippy]

The tooltip itself is fairly typical: a title, a manually specified width and height, and autoclose set to false. You will probably want to do that – prevent Tippy from automatically closing when displaying a PDF inside a tooltip. Inside the tooltip is a standard object tag which can embed the PDF in any page – in this case, embedding it inside the tooltip.

Be sure to keep in mind that some browsers or some computers might not be able to embed a PDF on a web page.


Be sure to include an alternate download method. The Declaration of Independence


Introducing Tippy for jQuery

Tippy for WordPress is by far my most popular plugin in the WordPress repository with nearly 33,000 downloads. With my latest addition, Tippy will be easily available to anyone using jQuery, whether or not they use WordPress.

Tippy for jQuery is in many ways almost a complete rewrite of my Tippy script and it brings with it quite a bit of new power and flexibility. Global configuration options with per-tooltip overrides? Yep. Draggable tooltips? Of course. Multiple tooltips on a page? Not a problem. Multiple tooltips that auto show, remain visible, and can be drug around? I don’t know why you would want to do that, but it can be done. Check out the examples at the Tippy demo page.

Many of the features available in Tippy for jQuery are not yet in Tippy for WordPress. The next step will be to incorporate the new jQuery script into the WordPress plugin. I don’t have a timeframe in mind, but don’t expect it to take too long.

In the meantime, enjoy Tippy for jQuery!

Swapping titles or images with Tippy

Tippy has just gained a new attribute: swapimg. Like swaptitle, swapimg provides a means of swapping the displayed image when it is hovered. It is used alongside the img attribute for times when Tippy is used with an image.

For text titles, if you want to display one thing by default yet change the text when users hover over the tippy link, you do it with: swaptitle=”new title”. For example: .

Swaptitle has been around a little while, but people have also asked about doing that only with images, when the img attribute is used rather than the title attribute. That is now possible with swapimg=”new_image_url”. For instance:

Learn more about Tippy at the Tippy page.

The title should have changed.
What a cute donut thief!
Powerful New Positioning Options with Tippy for WordPress 5.2.0

Tippy 5.2.0 brings with it a variety of new attributes and options related to positioning. This greatly increases the flexibility of where tooltips can be presented on the page.

First the options:

  • Tooltip Location: Two new options available, absolute and fixed. They do as expected: the first will position the element absolutely based on its containing element (if the container is position: relative;). By default, the tooltip is contained in the body element. The second option sets the tooltip to position: fixed;. With both of these options, the position is then determined by the offsetX and offsetY values which have been part of Tippy for some time.
  • Tooltip Container: As mentioned, the default container for the tooltip is the body element. If you want to change that – for instance, if you want the tooltip absolutely positioned within a container on the page – just add the element’s css selector here.

New attributes:

  • position: per-tooltip specify the position value of link, mouse, absolute, or fixed.
  • container: per-tooltip container specifier. Want one container in its default position but another tooltip in a specific container? You can do that here.

Here are some examples. In the space below I’m going to create an empty div:

 

Let’s say I have some that I want to within a specific container on my page; the new options and attributes make this possible. It can be specified globally or per-tooltip. Here is the shortcode for the first of these tooltips:

[tippy position="absolute" container="#tippy_demo_version" offsetx="0" offsety="0" title="tooltips" header="off" width="250"]Howdy, folks[/tippy]

Let’s say you want a tooltip to be , meaning it should stay in place when the user scrolls, that can be specified per-tooltip or globally. Notice for this one I also set autoclose=”false” so the tooltip doesn’t auto-close.

[tippy position="fixed" autoclose="false" offsetx="200" offsety="200" title="fixed"]I should still be here[/tippy]

I’ll be interested to see what people do with this. If you come up with creative uses, leave a comment or drop me an email.

Learn more about Tippy at the Tippy page.

Howdy, folks
See how nifty this is?
I should still be here
New home
bluehost-logo

After major performance issues with my previous host, I have finally jumped ship and am in the process of moving everything to a Bluehost Pro account. I had been with Dreamhost for nearly 10 years, but problems were only getting worse and recent changes on their end were going to increase the problems. So far, things look good with Bluehost. Hopefully performance will be a lot better on the new host.