Skip to content
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
src
test
.editorconfig
.gitignore
.travis.yml
Gulpfile.js
README.md
bower.json
package.json
yarn.lock

README.md

cuetip

cuetip

Travis

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

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

You can’t perform that action at this time.