cuetip

Simple CSS-only tooltips designed to be a dropped into your project.

View the project site for a live demo or to generate a custom build.

Getting Started

Browser Support

cuetip relies on CSS3 calc() which is IE9+ (with no Opera Mini support).

Installation

• Bower (Deprecated): bower install cuetip
• Yarn (Recommended): yarn add cuetip
• CDN via unpkg: https://unpkg.com/cuetip
• Latest release

Once in your project, you can use cuetip pre-built

<link rel="stylesheet" href="path/to/cuetip.min.css">

or as an @import in your Sass.

@import "path/to/cuetip";

Usage

• Start with your element that needs a tooltip:

  <span>
    Lorem ipsum
  </span>

• Add the [data-tooltip] attribute:

  <span data-tooltip="I'm a tooltip!">
    Lorem ipsum
  </span>

• Add any position classes if necessary:

  <span class="tooltip--bottom" data-tooltip="I'm a tooltip!">
    Lorem ipsum
  </span>

Configuration

Visit the project site to generate a custom build.

Variables

For brevity, the following documentation implicity prefixes all variables with $cuetip-. You can always view the Sass variables directly in the source.

• namespace
  • Default: tooltip
  • Description: Sets the [data-*] attribute that holds the tooltip.
• class-prefix
  • Default: tooltip--
  • Description: Sets the class prefix.
• no-tail
  • Default: no-tail
  • Description: Sets the class used to disable a tooltip tail.
• default-position
  • Default: top
  • Description: Sets the default tooltip position (top, right, bottom, or left).
• has-tail
  • Default: true
  • Description: Sets whether the tooltip has a tail (e.g. small triangle).
• cursor
  • Default: inherit
  • Description: Sets the cursor value.
• z-index
  • Default: 9999
  • Description: Sets the z-index value.
• color-foreground
  • Default: #fff
  • Description: Sets the foreground color (e.g. color) value.
• color-background
  • Default: #000
  • Description: Sets the background color (e.g. background-color) value.
• padding
  • Default: .25em
  • Description: Sets the padding.
• border-radius
  • Default: .1em
  • Description: Sets the border-radius.
• tail-size
  • Default: .25em
  • Description: Sets the size of the tooltip tail. $cuetip-has-tail must be true.
• offset
  • Default: .2em
  • Description: Sets the offset of the tooltip from its element.

Classes

You can use classes in the form <prefix><position> where <prefix> is $cuetip-class-prefix and <position> is one of the four CSS position keywords: top, right, bottom, or left. This allows you to change the tooltip position on a per-instance basis.

For example, using the default configuration a class of tooltip--left would position the tooltip to the left of the element.

Further, to disable a tooltip tail you can use a class of tooltip--no-tail.

Known Issues

• CSS minifiers may optimize & restructure cuetip in such a way that some of the functionality is broken. This is a known issue with csso that can be mitigated by disabling "restructuring" when optimizing. If you're using the pre-built CSS or not minifying your CSS during your build process then this is a non-issue.

Compatibility with Webfont Icons

If using icons that are implemented via ::before pseudo-elements, such as Font Awesome, you can use cuetip on the same element as the icon by disabling the tooltip tail (e.g. add class of tooltip--no-tail). An example can be found here.

You can also set the $cuetip-has-tail variable to false to disable tails on all tooltips.

Thanks

Thanks to @Ghosts for creating the logo.

License

MIT © Paul Esch-Laurent