CSS Tricks for Smart Quotes and Tooltips

Posted in Coding, HTML & CSS3 years ago • Written by 9 Comments

The CSS content property is a powerful way to add content to some elements via CSS. It is good because it allows you to add “formatting content”, that is things that you need in your presentation but isn’t the content itself, like quotes, icons (when you have text along with them), titles (not the text title, the HTML attribute).

But you may thinking now “Well, isn’t content always HTML’s job?” Well, most of the time it is.

Think about it a little bit: when you have a fancy quote, image caption, or even a custom icon for certain links (like “.pdf”), aren’t all these things just “decoration”? They are just there to clarify the message of your content, they are meaningless by themselves.

So we will learn simple and cleaner techniques to get some cool results via CSS! Although our title only mentioned smart quotes, we will do show you some other quick examples to get the most of this cool CSS trick.

So, let’s rock.

Our final result

Yeah, let’s start with a preview. Take a look at this demo, or download it and switch off the CSS. You will see that the formatting is completely separated from content.

Smart quotes – the smart way

Typography is a really important part of websites. So are the small typographic details.

First of all, quotes that don’t have opening and closing quotes aren’t “smart”: “This example isn’t smart” – Smart quotes have a clear opening and ending style “Hi, I’m a smart quote”.

This is why smart quotes are much better than “dumb” quotes. I usually use dumb quotes, they are just OK for common text (just OK, if you have option, choose smart ones), but they are really bad in block quotes or citations.

Many people use images to get a better result, you know with that big and fancy curly quote. But let me tell you a secret: They are doing it wrong.

We have two really good pseudo-elements that will help us from now on, :before and :after. They basically give you the ability to add extra content before and after each element on the page. Pretty cool, isn’t it?

So instead of filling our code with unnecessary spans and other unwanted tags, we just write our common markup and adjust anything else with CSS.

In our demo, we have this basic markup:

<blockquote>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus est, egestas vel aliquet at, pellentesque nec lorem. Pellentesque molestie bibendum eros, eu suscipit nisi volutpat fringilla.</p>
	<p class="cite"><cite>by Albert Einstein</cite></p>
</blockquote>

Nothing really new here, an ordinary block quote. So let’s make it prettier with our magic :before and pretty CSS:

blockquote {
	padding-top: 20px;
	overflow: hidden; /* clearfix alternative */
	font-size: 18px;
	line-height: 150%;
	color: #454545;
}
blockquote:before {
	display: block;
	float: left;
	margin: 10px 15px 0 0;
	font-size: 100px; /* let's make it a big quote! */
	content: open-quote; /* here we define our :before as a smart quote. It could be any content, even the HTML entity alternative to this opening quote, that is “ */
	color: #bababa;
	text-shadow: 0 1px 1px #909090;
}
blockquote:after {
	content: none;
	/* could be content:close-quote; but lets keep it clean*/
}

As you can see, with a few lines you make all the magic. No images, no hidden secret.

The only downside (as almost anything with CSS) is the cross browser support. Any modern browser supports this feature, but IE8 (really, not a browser) only supports it when you have a doctype declaration.

CSS pure tooltip

Another really good use of it is to combine :after or :before with other pseudo-elements, like :hover. Yeah, I know you are wondering if we could have a pure CSS tooltip, and yes, we can.

What you have to do is just set a good title for your links, and see the magic happen with this snippet:

a:hover:after {
	position: absolute;
	padding: 5px 10px;
	margin: -25px 0 0 -10px;
	font-size: 12px;
	content: attr(title);
	color: #333333;
	text-shadow: 0 1px 1px #909090;
	background: #ffffff;
	border: 1px solid #ffdada;
}

So you can customize it as you want :D

Automatic icons for file-type links

Sometimes we have to link other file types that the user can’t view in their browser. So when you link to anything other than HTML, it is always a good practice let the user know about it, with a simple icon, for example.

For this task you could use the $ attribute comparator. It searches for something at the end of an attribute, so if you have a[href$=".pdf"] it will apply the rules to any link that has an href attribute that ends with “.pdf”. Wow, it is exactly how a link to a pdf file should look!

But, we still need the :before to create a new “element” so we don’t mess up any other common links rules. So, our CSS this time will be:

a[href$=".pdf"]:before {
	padding: 5px 15px;
	margin: 0 5px 0 10px;
	content: "";
	background: url(pdficon.png) no-repeat;
}

Icons for external site links

Sometimes we link to others sites resources, but we can get our visitors lost in the process, since they almost always don’t expect to be redirected to another site.

So it would be good to put a simple icon in our external links, so the user knows they’ll be redirected to another site.

This is a pretty tricky selector. We have the “begins with” selector, via a[href^="#othersite"] . Also we have the “not” selector, so you don’t need to select each site as external, but the support for this is still bad, so I wouldn’t recommend you use it. What you have to do then is to set all your links as “external” (with the icon) and just our sites links we set without the icon.

The CSS should be something like this:

a:after {
	padding: 5px 15px;
	margin: 0 10px 0 5px;
	content: "";
	background: url(external.png) no-repeat;
}
a[href^="#mysite"]:after {
	/* let's reset defined stuff */
	padding: 0;
	margin: 0;
	content: none;
	background: none no-repeat;
}

Image captions

I swear to you, I’ve tried this one, and there is no way to have it working on all major browsers that I know of.

It seems to be a bug that when you set a valid src attribute you can’t use the content property (it is set to null in order to have the external content) so you can’t have a :before or :after declaration, since they need content as a non-null value.

But I hope we will see this working soon with all the browser updates happening.

Are you hungry yet?

I surely missed some cool uses for :before and :after. What do you think about it? Can you think of other uses for this? Why don’t you comment and share your thoughts?

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

43 Written ArticlesWebsiteGoogle+

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

9 Comments Best Comments First
  • Max

    Friday, July 1st, 2011 20:47

    2

    There is an error in the example CSS that describes the tooltip:
    a:hover:after
    should be:
    a:hover:after, a:focus:after
    (OK, so I’m being a bit cheeky by describing it as an error, but my point is that it is absolutely essential! Too many designers forget that what happens on hover must also happen on focus.)

    +3
    • Rochester Oliveira

      Saturday, July 2nd, 2011 04:06

      4

      Hey Max,

      Nice tip, I forget about this all the time! :)
      I’ll get it right next time.

      Thank you very much!
      []‘s
      Rochester

      +1
  • Jason

    Friday, July 1st, 2011 19:45

    1

    Hey Rochester,

    I love the idea of purely CSS styled tooltips, but I’m looking at this demo in Chrome and FireFox and when I hover the elements with titles two separate tooltips show up. Do you know of a way to suppress the default browser tooltip? That could make this technique quite powerful.

    Thanks!

    0
    • Rochester Oliveira

      Saturday, July 2nd, 2011 04:13

      3

      Hey Jason,

      I’m sorry I don’t have a really good answer for you off the top of my head.

      An ugly solution could be to use an alternative attribute instead of title, like those brand new data-* HTML5 attributes. Something like [a href="#" data-tootip="my text" /].

      But I’ll search about it, and if I find something useful, I’ll let you know.

      Thank for pointing it out!
      []‘s

      0
  • Rochester Oliveira

    Thursday, September 22nd, 2011 05:31

    5

    Yo! Thanks I’m trying my best ;)

    0
  • Catalin

    Thursday, January 19th, 2012 07:12

    6

    Always good to learn new things, keep it up.

    0
    • Rochester Oliveira

      Friday, January 20th, 2012 05:32

      8

      Hi Catalin,

      I’m glad you liked.. Actually you remembered me to write more about CSS, thanks :)

      []‘s

      0
  • Rahul

    Tuesday, May 15th, 2012 09:50

    9

    Thanks Rochester, this is really very informative. It works very smoothly on my browser.

    0
  • Rochester Oliveira

    Friday, January 20th, 2012 05:31

    7

    Hi Bank!

    I’m glad to help! Hope to see you again soon :)

    []‘s

    0
  • Rahul

    Tuesday, May 15th, 2012 09:50

    9

    Thanks Rochester, this is really very informative. It works very smoothly on my browser.

    0
  • Rochester Oliveira

    Friday, January 20th, 2012 05:31

    7

    Hi Bank!

    I’m glad to help! Hope to see you again soon :)

    []‘s

    0
  • Catalin

    Thursday, January 19th, 2012 07:12

    6

    Always good to learn new things, keep it up.

    0
    • Rochester Oliveira

      Friday, January 20th, 2012 05:32

      8

      Hi Catalin,

      I’m glad you liked.. Actually you remembered me to write more about CSS, thanks :)

      []‘s

      0
  • Rochester Oliveira

    Thursday, September 22nd, 2011 05:31

    5

    Yo! Thanks I’m trying my best ;)

    0
  • Max

    Friday, July 1st, 2011 20:47

    2

    There is an error in the example CSS that describes the tooltip:
    a:hover:after
    should be:
    a:hover:after, a:focus:after
    (OK, so I’m being a bit cheeky by describing it as an error, but my point is that it is absolutely essential! Too many designers forget that what happens on hover must also happen on focus.)

    +3
    • Rochester Oliveira

      Saturday, July 2nd, 2011 04:06

      4

      Hey Max,

      Nice tip, I forget about this all the time! :)
      I’ll get it right next time.

      Thank you very much!
      []‘s
      Rochester

      +1
  • Jason

    Friday, July 1st, 2011 19:45

    1

    Hey Rochester,

    I love the idea of purely CSS styled tooltips, but I’m looking at this demo in Chrome and FireFox and when I hover the elements with titles two separate tooltips show up. Do you know of a way to suppress the default browser tooltip? That could make this technique quite powerful.

    Thanks!

    0
    • Rochester Oliveira

      Saturday, July 2nd, 2011 04:13

      3

      Hey Jason,

      I’m sorry I don’t have a really good answer for you off the top of my head.

      An ugly solution could be to use an alternative attribute instead of title, like those brand new data-* HTML5 attributes. Something like [a href="#" data-tootip="my text" /].

      But I’ll search about it, and if I find something useful, I’ll let you know.

      Thank for pointing it out!
      []‘s

      0

Comments are closed.

54.81.80.46 - unknown - unknown - US