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

2 Comments

  • Wow … but if you have multiple tooltips of different sizes on a page, each would require its own class and code block at the bottom. Right?

    If that’s the case, I’ll just have to wait for the lightbox option.

  • Hello Chris,
    in the future development of tippy, is there something to make it more “mobile friendly”?
    And since I’m starting now to translate my blog in english, I have no idea of how adapt tippy/glossy to the double content.
    A nice idea would be to have a setting, in the glossy entry page, that tells the plugin to which language correspond that specific entry, and a value in the short code that call the right version of the entry.
    Something such as “[gs whatever_id lang=en]whatever[/gs]” that calls the entry called “whatever_id” showing the “en” version of it. Assuming that multiple version are present, differing by the language flag.

Leave a comment

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