Pure CSS tooltips in WordPress.com

Another technical post; apologies to my followers who may be more interested in my writing category posts. In yesterday’s post, I wanted to include some information in a table, but, due to problems with the little available space, wanted to use “tooltips” – normally not a problem, when you have control over the site and can add JavaScript libraries and do fancy stuff with jQuery.

Need Tooltips, Have No JavaScript

But since I chose to conveniently have my blog hosted on wordpress.com (instead of writing it locally with wordpress.org and uploading it to another host, where I’d have full control over PHP, JavaScript, CSS, etc.), I’m limited to the custom CSS functionality, available from the dashboard (you may need to upgrade if you’re on the free version, sorry…) via Appearance > Customize. Luckily, I came across a stackoverflow question a few months ago that asked how to create tooltips (with HTML content, not just using the title attribute) without using JavaScript. To my surprise (I’ve been using various JavaScript libraries to produce nice tooltips on several projects but didn’t think a pure-CSS solution was even possible), someone had posted an answer describing how it could be done. The question was perhaps not phrased ideally, received several down-votes and was closed because “it wasn’t about programming”. I left a comment saying it should be re-opened and didn’t think about it again until last week, when I stumbled across the same question again. It was still closed, so I edited it to make it more apparent that it was a valid HTML/CSS question and flagged it for moderator attention so it could get re-opened. It worked, and now I found myself in need of trying it out on my blog.

Of course you can apply the same principles to any non-WordPress page where you have control over the HTML and CSS.

An Example

Hover your mouse over this paragraph to see an example of what I mean by a tooltip. It should pop up just below the paragraph.

This box is the tooltip; it can be styled with CSS to give it a different appearance.

So here’s a modified version of the solution posted on stackoverflow in the hope that it can help others looking to use tooltips on their wordpress.com pages.

Step One: The HTML

You need to fiddle with the HTML a little for this – if you don’t know what that means, you need to switch tabs on the top right of your editor from “Visual” to “Text”, which will show you a view with (some of) the HTML that will be used when your page is published.

Edit HTML on the "Text" tab

Switch to the “Text” tab to edit your page’s HTML

For each tooltip you want to create, you’ll need to have two nested tags with two classes: one for the visible tooltip “container” (the part that you have to hover over to reveal the tooltip), and one nested inside it for the initially hidden tooltip (which only becomes visible when you hover over the container. In my case, the tooltip container was a table cell (td) and the tooltip was in a generic container (a “div“):

<td class="tooltipContainer">
  This is the visible text, the tooltip container.
  <div class="tooltip">
    This is the hidden text, the tooltip contents that are only shown on hover.
  </div>
</td>

Instead of the table cell, it could of course also be another div.

Step Two: The CSS

If you were to preview the HTML changes without the necessary CSS, you’d see both the container and the tooltip, whether you hover or not. To edit your site’s CSS, go to “Appearance” and “Customize” from your dashboard’s menu.

Customize option from your menu

Accessing the “Customize” option from your dashboard’s menu

If you want, you can navigate to the post you’d like to try it out on, then select “CSS” from the menu on the right to open the CSS editor.

Editing your site's CSS

Editing your site’s CSS: from your dashboard, choose “Appearance”, then “Customize” on the left, then “CSS” on the right to open the CSS editor

Insert the following bit of CSS in the editor. (It needs to be added to your site only once; after that, any time you use a tag with class “tooltip” nested inside a tag with class “tooltipContainer”, the CSS will do the rest.)

.tooltipContainer {
  position: relative; /* add position offsets if required */
}

.tooltip {
  position: absolute; /* add position offsets if required */
  width: 200px; /* edit as required */
  background-color: black; /* edit as required */
  color: white; /* edit as required */
  border-radius: 5px;
  padding: 10px;
  opacity: 0;
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  -ms-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

.tooltipContainer:hover .tooltip {
  opacity: .8; /* edit as required */
}

.tooltipContainer .tooltip:hover {
  opacity: 0; /* optional */
}

Step 3: Customise As You Please

I’ve added comments to indicate where you can play around with values to suit your own taste; for instance, you can add positional offsets to have the tooltip appear somewhere other than below the container, or change the tooltip’s width, its colours, the opacity (I’ve made mine 80% opaque; change it to “1” if you don’t want it to be transparent. The last style I’ve added to hide (no opacity) the tooltip when you hover over where it appears (as opposed to hovering over the container), since it can be annoying to have it obscure other text), but of course you can just leave that part out if you want the tooltip to stay when hovered over (for instance, if you have a link in it and want people to be able to click on it).

Drawbacks? If a user has no mouse, e.g. on mobile devices, they don’t see the extra information because they don’t “hover”. Otherwise, it’s a clean CSS solution for functionality that normally requires JavaScript.

Feel free to let me know in the comments if you found this to be useful or if you have any questions. Enjoy!

About Amos M. Carpenter

Web dev by day, author by night, and generally interested in (and opinionated about) way too many things.

Posted on 9 March, 2014, in Development and tagged , , , , , , . Bookmark the permalink. 5 Comments.

  1. Actually if you’re looking to make a tooltip arrow you there is a website that can generate it for you using pure css and html. The website is http://www.generatecss.com if anyone is interested.

    • I’ve had a quick look, and the “arrow” they have is a static sign rather than a tooltip shown on hover, but it seems they have some other interesting gadgets that may come in handy at some point. Thanks for letting me know, Ron, and thanks for stopping by my blog.

  2. If some one needs expert view concerning running
    a blog then i propose him/her to visit this weblog, Keep up the good
    job.

  3. Hey I am so delighted I found your site, I really found you by error, while I was looking on Google for something else, Anyhow I am
    here now and would just like to say thanks a lot for a fantastic post and a all round enjoyable blog (I also love the theme/design), I don’t have time to
    read it all at the minute but I have bookmarked it and also
    added in your RSS feeds, so when I have time I will be back
    to read a lot more, Please do keep up the fantastic job.

    • Thanks for the kind comment 🙂

      Most of my site is about writing, though, with only the occasional technical post thrown in. Speaking of writing, you may consider learning about full stops (periods) and how they separate sentences 😉

Feedback? Comments? Fire away.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: