At my job there is no UX expert, which can be frustrating since most of the daily discussions I have with colleagues is about user experience / interaction.

Right now there is a discussion regarding (custom) tooltips/balloons on a website, the concept is 'we have too much content' so they try to shorten it and place an information icon behind it with a tooltip. The tooltip will (probably) contain a lot of information - I've seen them use tooltips like this to display specifications for hardware, including images.

The reason behind minimizing the content is that we have too much of it and our Sales guy wants to focus on his 'sell sell sell' button.

In my opinion tooltips should only be used for forms/input elements where more information is really needed, the information in a tooltip should be short and descriptive and not require any interaction (links for example) unless the label is already clear enough.

Additionally I think you might damage your users' trust a bit if you hide pretty much all important data behind a little icon after some sales-driven text.

So I am interested to hear what the real UX people here think about this problem/'solution'.

This is basically what they are asking me to create for them: Example usage

(A sidenote is that we are trying to make our website as touch-friendly as possible and small icons like this are impractical touch targets.)

  • 3
    May be what you really need is a content strategy and a good copywriter.
    – kontur
    Feb 6, 2013 at 7:06
  • @kontur you are very right, we do need that. But unfortunately due to a hiring freeze a good copywriter is out of the question for now and a content strategy is in the works.. but from the sounds of it that's still at least a year in the future.. unfortunately. Feb 6, 2013 at 18:11

6 Answers 6


If the information can be hidden behind a tool tip, is it relevant at all?

Once you start hiding information behind interactive elements, there are new barriers that you run up against. If this works on hover on a desktop browser, this will need to be on click for a phone, however bringing up the tooltip on a phone may cover up the call to action completely until it is closed. This would defeat the point in creating the tooltips in the first place — making the CTA more prevelant.

You should also consider rearranging where these CTA and information content appear. Pricing tables are a great example of putting the details BELOW the CTA buttons.

enter image description here

This will allow you to "make the sell" at the top and inform the user below it. The pricing table also put the same CTA button below the details so a user has easy access to "Sign Up" or "Buy" before or after reading the details.

  • Thanks! This is something that we are hoping to work towards, the big problem we have with this right now is that while we offer various "packages" the difference between them is very very minimal except for price. So when putting all the packages next to each other it always ends up looking like the cheapest one is the best to get (while 'we' prefer a higher ARPU). This is very silly, I know, but changing the product isn't an option right now unfortunately. Any tips for that? Feb 6, 2013 at 18:18
  • As for relevancy (character limit in prev. message) the information is relevant for certain kinds of people - we have a very broad target audience and some of these want every little detail and others just want the highlights. I think that should be possible to combine this without tooltips behind nearly -every- sentence as my co-workers proposed. Feb 6, 2013 at 18:20
  • I can't think of a great solution for offering different packages that are essentially the same, but for different prices except for something that may help increase sales. Why not eliminate options and sell at a higher price. Providing numerous options of the same product may cause buyers remorse and doubt. Selling 1 or 2 products at a higher price may help in the end. There is a great MSNBC profile of Costco about selling only 1 variation of an item. People will buy a $30 bottle of 500 count Advil if there is no option to buy a $6 bottle of 100 count
    – ckaufman
    Feb 6, 2013 at 20:41
  • I completely agree, unfortunately I can't make decisions like this. There have been talks about just offering 1 variation but the result ended up being 2 variations (instead of 4). But there are talks in making the second variation more appealing with more extra's so then something like this might work - that's still months from now. So for now they want to 'hack' something together to try and improve sales.. I doubt their solution will. Feb 7, 2013 at 5:26

For something like that, I would consider using an accordion style interface, where the summary sales copy is somewhat like a heading/button and the content can be expanded if that item is clicked.

Make your interface clear with something like a plus sign to show that they can expand it. This problem has been solved pretty widely by FAQ systems.

Take this for example (although I'd probably make the plus signs contrast better):

FAQ Page with Expandables

Here is a link to the interactive site:



I would leave tooltips to form inputs too and make lists like these expandable/collapsible or link off to different pages entirely.

  • 2
    Can you explain you reasoning in more detail?
    – kontur
    Feb 6, 2013 at 7:44
  • 1
    If the bullet points mentioned are indicative of the level of content displayed, then the info is already self-contained enough that additional details can be obscured for most users but accessible to those who REALLY want it. People who access this on mobile devices don't need paragraphs of explanatory text cluttering up their screens either. Feb 7, 2013 at 6:28
  • Good point about the mobile users screen real estate. You could update your answer with the ´edit´ link and add some of your comment to the answer. It is likely to be of more help like that.
    – kontur
    Feb 7, 2013 at 7:13

Look at in-text advertising as sample technology, like Vibrant or Infolinks. You can use a kind of link which distinguished from normal underlined link, e.g. by dotted underline or double underline. Thus you can exactly tell user what namely has additional description. Pressing this link or hovering it activates popup window with additional information of any kind you need - technical, marketing, etc.

  • Yes, it is technically possible to do this thing, but that's not really what the question is about. The OP is asking about whether or not it is a good thing to do, and why that is the case.
    – JonW
    Feb 6, 2013 at 8:50
  • Sorry for misunderstanding the question. I should clarify that in fact my answer endorses idea of reducing visual content and expanding it in some way. Also I offer another possible solution which seems to me more reasonable than tooltips.
    – Serg
    Feb 6, 2013 at 9:04
  • @Serg this is basically a nice looking tooltip/balloon/etc. but it doesn't really answer my question. Why would this be better than for example just optimising the customer journey and/or content. Because I can't really find any good articles about this subject except for examples on how to make them. Not to help decide if/when they are a good idea. Feb 6, 2013 at 18:15
  • @CharlesLeaf: Thank you for your comment and sorry for wasting your time.
    – Serg
    Feb 6, 2013 at 18:48

Good that you mentioned that you have to make the website touch-friendly. If the content is too much, it is not preferred to use tool-tips at all. Depending upon the kind of content you want to have in tool-tip, you can use the following options.



Also, there is no problem in having few interactive elements (CTAs) in the pop-over itself. Like buttons or links. Just make sure they are not too important for the user at the first sight.

If you can provide some more insight about the content and context, it would be more helpful.

  • But a pop-over is basically just a custom tooltip (except it activates on click, at least in the Bootstrap sample). I'm not a big fan of their sample because I can imagine people not knowing how to close this window (clicking the exact same button that hasn't changed state isn't something all users realise). More content/context isn't possible due to work regulations, all I can say is that right now I'm talking a sales page for services. Feb 6, 2013 at 18:23

From comments, I understand that you need to offer two variants of a product. I'll look into this aspect, and how it could be supported:

  • The variants are very similar, but differ in price substantially.

  • They are so similar, that, in direct comparison, there is not much reason to pay the higher price.

But you still assume that you can sell both variants. That implies you assume there are two kinds of customers:

  • the "normal customer" - which you expect to be comfortable with the lower price
  • some kind of advanced customer, which will likely be willing to pay the higher price

That's quite possible - for example, the product could be offered in two contexts, where one is related to higher priced products than the other. Or it could be just consumer and business customers.

What you want is to offer two distinct "product identities";
So you should do just that: Completely separate the offers, using two different websites, page styles, possibly even different domain names.

This way, you can explain to both groups independently why they may want it, and the difference being small becomes irrelevant.

I would hope that the amount of content you need to handle would be smaller for each of the variants, because it is only relevant to one group in part.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.