Skip to content

Pinjasaur/cuetip

Repository files navigation

cuetip

cuetip

Build Status

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

View the docs 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

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 docs 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