Blog Archives

Robin Hobb – A to Z: R

R is for Robin Hobb, my favourite author and probably the author whose writing has most inspired me to attempt to write myself. Two of my previous A to Z challenge posts, the very first one on Assassin’s Apprentice and the “F” post on Fitz and the Fool, have featured content related to Robin Hobb’s work, so today, I’ll try to minimise the swooning and just write a little about the person behind the pseudonyms.

Robin Hobb

Robin Hobb in 2011; image embedded from Wikimedia Commons.

Wikipedia will tell you that Robin Hobb’s real name is Margaret Astrid Lindholm Ogden, and that she published a number of books under her first pen name, Megan Lindholm, before taking on more epic fantasy as Robin Hobb, starting with the Farseer Trilogy. She still writes using both names and uses different styles for both; Megan Lindholm books seem to be a fair bit shorter while Robin Hobb’s are more epic in scope. Well, unless you count short stories, which are also kind of… er, short.

Margaret/Megan/Robin will be making appearances in Sydney and in Perth (where I live) in June, and I’m looking forward to being able to see her in person (without gushing or screaming like a teenager seeing The Beatles, hopefully) and getting her to sign one of my books (oh, but which one?).

If you’re a writer looking for some great advice, and the secret of how you can become a writer, check out Robin’s excellent post on I Want To Be A Writer, But…. Ok, I’d better hit the “Publish” button now because it’s nearly midnight and this post needs to be for today.

Any favourite writers or other idols you’re looking forward to seeing in person? Let me know in the comments.

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!