3

Nice css tooltips for your store

multimixer | learn | Tuesday June 11 2013

I got several questions recently from people who want to add tooltips to various areas of their osCommerce store. I got to see any kind of possible and impossible approaches to this ! It is true that tooltips are a nice way to provide additional information to your store visitors

Things are really simple, I’ll post a couple of examples that you can use in your store. There are many ways available of course, I prefer to use plain css

Important to understand is, that a tooltip has an “anchor” and a “content”. The anchor is the part that stay visible on the page and will trigger the tooltip effect when someone hover over it. The content is the part that stay hidden until someone hover over the anchor

1 Tooltips in product descriptions

This is the most simple case since it is plain html. You can add following into your product description, or any other text, like for example a category description, the text in your static pages etc

<a href="#" class="tooltip 1">
  <span class="Tanc">Tooltip</span>
  <span class="Tcon">
      <strong>The title 1</strong><br />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a purus et mauris pharetra sagittis ut in ligula. Sed sagittis, lacus sit amet aliquet elementum, dui leo porttitor arcu, ut tempus orci erat eget sem. Proin nec orci sit amet lorem semper gravida sed eu sapien. Nulla commodo odio vitae libero venenatis sit amet suscipit est tempus.
  </span>
</a>

The word “tooltip” is the anchor. The text that comes after that and is wrapped into a span of class “Tcon” is the tooltip content.

There is no need to have the tooltip wrapped into a <a> element, you can use anything you like, for example a div, like this

<div class="tooltip 2">
  <div class="Tanc">Tooltip</div>
  <div class="Tcon">
      <strong>The title 2</strong><br />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a purus et mauris pharetra sagittis ut in ligula. Sed sagittis, lacus sit amet aliquet elementum, dui leo porttitor arcu, ut tempus orci erat eget sem. Proin nec orci sit amet lorem semper gravida sed eu sapien. Nulla commodo odio vitae libero venenatis sit amet suscipit est tempus.
  </div>
</div>

Try it out, copy paste it into your description and enjoy the result :) Don’t forget to add the css that comes further down this post

There are of course more variations that you can try out, for example

The tooltip anchor and the tooltip are a link

<a href="http://minitemplatesystem.com" target="_blank" class="tooltip">
  <span class="Tanc">Tooltip 3</span>
  <span class="Tcon">
      <strong>The title 3</strong><br />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a purus et mauris pharetra sagittis ut in ligula. Sed sagittis, lacus sit amet aliquet elementum, dui leo porttitor arcu, ut tempus orci erat eget sem. Proin nec orci sit amet lorem semper gravida sed eu sapien. Nulla commodo odio vitae libero venenatis sit amet suscipit est tempus.
  </span>
</a>

Only the tooltip anchor is a link

<div class="tooltip">
  <div class="Tanc"><a href="http://minitemplatesystem.com" target="_blank">Tooltip 4</a></div>
  <div class="Tcon">
      <strong>The title 4</strong><br />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a purus et mauris pharetra sagittis ut in ligula. Sed sagittis, lacus sit amet aliquet elementum, dui leo porttitor arcu, ut tempus orci erat eget sem. Proin nec orci sit amet lorem semper gravida sed eu sapien. Nulla commodo odio vitae libero venenatis sit amet suscipit est tempus.
  </div>
</div>

Add a link within the tooltip

<div class="tooltip">
  <div class="Tanc">Tooltip 5</div>
  <div class="Tcon">
      <strong>The title 5</strong><br />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a purus et mauris pharetra sagittis ut in ligula. Sed sagittis, lacus sit amet aliquet elementum, dui leo porttitor arcu, ut tempus orci erat eget sem. <a href="http://minitemplatesystem.com" target="_blank">This is a link</a> Proin nec orci sit amet lorem semper gravida sed eu sapien. Nulla commodo odio vitae libero venenatis sit amet suscipit est tempus.
  </div>
</div>

Use an image as an anchor, with or without a link.

The example below is showing the anchor as an image and link

<div class="tooltip">
  <div class="Tanc"><a href="http://minitemplatesystem.com" target="_blank"><img src="images/info_icon.png" style="vertical-align:middle" /></a></div>
  <div class="Tcon">
      <strong>The title 6</strong><br />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a purus et mauris pharetra sagittis ut in ligula. Sed sagittis, lacus sit amet aliquet elementum, dui leo porttitor arcu, ut tempus orci erat eget sem. Proin nec orci sit amet lorem semper gravida sed eu sapien. Nulla commodo odio vitae libero venenatis sit amet suscipit est tempus.
  </div>
</div>

Add an image within the tooltip.

The image can be a link or not

<div class="tooltip">
  <div class="Tanc"><a href="http://minitemplatesystem.com" target="_blank"><img src="images/info_icon.png" style="vertical-align:middle" /></a></div>
  <div class="Tcon">
      <strong>The title 6</strong><br />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a purus et mauris pharetra sagittis ut in ligula. Sed sagittis, lacus sit amet aliquet elementum, dui leo porttitor arcu, ut tempus orci erat eget sem. Proin nec orci sit amet lorem semper gravida sed eu sapien. Nulla commodo odio vitae libero venenatis sit amet suscipit est tempus.
  </div>
</div>

There are of course more options available, but I think that you got the idea now.

Next part will be about how to create tooltips within php pages of osCommerce

The tooltip css

This is the most important part, this is what makes the tooltip alive. The css is common for all too tips, doesn’t matter in what part of the store you are using them.

You can paste the following part into your file catalog/stylesheet.css

Mini Template System users, please use file catalog/mts/themes/your_theme/style_custom.css to add that and leave the default stylesheet.css and any other css file in peace

/* tooltip base: Do not alter */
.tooltip, .tooltip:hover{position:relative;}
.tooltip .Tcon{visibility:hidden;position:absolute;}
.tooltip:hover .Tcon{visibility:visible;}

/* tooltip positioning */
.tooltip .Tcon{
  left:-350px;
  bottom:30px;
}
.tooltip:hover .Tcon{
  left:0;
  bottom:30px;
}

/* tooltip styling */
.tooltip, .tooltip a, .tooltip:hover{text-decoration:none;}
.tooltip .Tcon{
  width:300px;
  padding:20px;
  line-height:16px;
  background:#000;
  opacity: 0.8;
  border:2px solid #FFF;  color:#EEE;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius:2px;
  -moz-box-shadow: 0px 0px 8px 4px #666;
  -webkit-box-shadow: 0px 0px 8px 4px #666;
  box-shadow: 0px 0px 8px 4px #666;
}
.tooltip .Tcon, .tooltip:hover .Tcon{
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}
.tooltip .Tcon strong{line-height:30px; font-size:16px;}
.tooltip .Tcon a{text-decoration:underline}

/* anchor styling */
.tooltip .Tanc{cursor:pointer;}

You can see that the css rules are split into groups about styling and positioning.  You could merge some of them, but for starting you can leave them like this, it’s easier to understand what is going on

You can change anything you want of course, important is to leave the first set of rules (tooltip base) in peace

If you want an example of how such a tooltip look like, you can hover over the text “support this blog” that comes right after, or over the twitter icon in the footer

Enjoy

Click +1 to recommend this to your friends when they search.
Tags: ,

multimixer

follow multimixer on Twitter

Follow me on twitter. I'm not tweeting all day long and guaranteed no spam and no advertising.

If you like what you read and if you think it will help you in your online business, then please consider a donation.

There is no obligation to do so and all information provided here is free to use.

It will however help to keep this blog alive, free of advertising and full of content.