CSS Tooltip Generator

This generator will help you design and create CSS tooltips.

Demo

Top

Lorem Ipsum

  • Aliquam ac odio ut est
  • Cras porttitor orci
Left

Lorem Ipsum

  • Aliquam ac odio ut est aliquet tempor vitae sed arcu
  • Cras porttitor orci ac porta gravida
Right

Fade in Effect

  • This demo has fade in/out effect.
  • It is using CSS opacity, visibility, and transition property to toggle the tooltip.
  • Other demos are using display property(none or block) for the toggle.
bottom

CSS Tooltip

The CSS tooltip appears when user moves the mouse over an element, or when user tap the element with a mobile device.

Demo Source Code:    
 

CSS Tooltip Generator

Position:
top right bottom left
Text Color:
Background Color:
Border Color:
Box Shadow Color:
Min Width:
Max Width:
Tooltip Arrow Location:
Tooltip Arrow Size:
Fade in:
This code generator does not cover all the style and Html configurations. You can easily further refine it based on the generated code, or refer to the Demo Source Code listed above for more variations.

Set it blank if box shadow border effect is not required.

If checked, it will use CSS opacity, visibility, and transition property to toggle the tooltip.

Otherwise it will use the display property("none" or "block") to turn tooltip on and off.

 

You May also Consider Using our JavaScript Tooltip

Css Tooltip is simple, and considered satisfactory in most cases. However, there are times that its limitations are becoming clear.

Its limitations can be resolved by using our JavaScript Tooltip:

Features CSS Tooltip Javascript Tooltip
Opening Events Mouse over (or tap with mobile devices)

Can be configured to any client event such as onclick, onmouseover, onfocus, ect.

Click me  

Accessibility Contents (such as a link) in the tooltip not reachable

Fully accessible. The tooltip will stay when moving mouse from target element to tooltip. Examples:

  • Standard
  • Sticky
  • Very Sticky
<span onclick="tooltip.pop(this, 'Tooltip has been<br>triggered by click event.')">Click me</span>
I've been configured as {sticky: true}
You can close me by clicking other page areas.

I've been configured as {sticky: 1}

I can only be closed by clicking the close button.

Visit JavaScript Tooltip Options for more details.

Tooltip content is declared in script, such as:<span onclick="tooltip.pop(this,'Hello');">Hi</span>

An element and its innerHTML in the page, such as <div id="div1">......</div> will be used as the tooltip content:

<button onclick="tooltip.pop(this, '#div1');">Hi</button>

Usually those elements are placed inside a display:none wrapper:<div class="display:none;"> <div id="div1">...</div> <div id="div2">...</div> ...... </div>So that those tooltip contents are not visible unless required.

Tooltip can be populated with the content fetched from external files such as text document, XML document, or other web pages.

For example:

<input onfocus="tooltip.ajax(this, 'help/tip1.txt')" type="text" name="email" />
Content Source Location Tooltip content has to be written into the same tooltip target element container: <span class="tooltip"> (target text) (tooltip content) </span>

Tooltip content can be:

  • specified directly in script
  • or written into HTML element anywhere in the page
  • or obtained from external documents or other web pages through Ajax
Visibility

Might be cut off if located close to page borders.

Will smartly reposition itself if no enough space is found ahead.
Browser Support

Yes (IE 9.0+)

Yes (IE 6.0+)
Cost Free $20.00

QUESTION & ANSWER
More ...

RECENT QUESTIONS

 

Your Name
+ =  

Question Title

If your question is about troubleshooting, please first go through the checking list in Troubleshooting Request.

▲