Tooltips

Tooltips Tooltips are pretty cool are a way to provide contextual information about a component, image, text, or other item to a user. Ideally, the context provided to the user will be a very short message in the range of 5-10 words. Longer messages Hey there, how are you doing? I'm great, thanks for asking. It's not like I'm mentally struggling on a daily basis to maintain focus or anything, and how dare you accuse me of such. I'm not having trouble working, you're having trouble working. And anyways, what's up with such a rude additude anyways? You should learn to me more kind to people who.... are definitely not going through anything in their personal or professional life that could cause them to go off on you at a moment's notice. can be added, but will not be formatted well.

If you truly wish to place a larger amount of content within a tooltip, you'll have to use use the .tooltip-text-scrollYou monster. You made me do this.
You and your incessant desire for tooltips.
How could you? You couldn't leave enough alone when I told you not to make longer tooltips the first time, could you?
I guess that I'll just have to continue on and show you the true power of the tooltip that has been expanded to twice it's former width, and now features a (theoretically) unlimited amount of space that you can use!
That's right, you saw it, I introduced overflow handling. What are you going to do now? Not read the rest of this? I can assure it's not worth it, but you can't resist now, can you?
instead.

Simplicity offers more than just tooltips for text too. If you'd like to create an image tooltip tux , you can do so as well.

Examples

There are 2 steps to creating a basic.

Assign the .tooltip class to an element
Assign a .tooltip-text class to an element within the .tooltip element.

Creating a basic tooltip

<p class="tooltip">
    If you hovered over this
    <span class="tooltip-text">
        I would display
    </span>
</p>

Class

Width

Height

.tooltip

N/A

.tooltip-bare

N/A

.tooltip-text

120px

N/A

.tooltip-text-scroll

240px

200px

.tooltip-image

200px