Skins Pro only

Tooltip skins are created entirely in CSS, new skins can be added with just a few lines of code:

/* purple */
.tpd-skin-purple .tpd-content,
.tpd-skin-purple .tpd-title,
.tpd-skin-purple .tpd-close { color: #fff; }
.tpd-skin-purple .tpd-background-content { background-color: #5b45e3; }
.tpd-skin-purple .tpd-background {
  border-width: 1px;
  border-color: rgba(6,0,12,.6);
}
.tpd-skin-purple .tpd-background-title { background-color: #5b45e3; }
/* line below the title */
.tpd-skin-purple .tpd-title-wrapper { border-bottom: 1px solid #2a1fb4; }
/* shadow */
.tpd-skin-purple .tpd-background-shadow { box-shadow: 0 0 8px rgba(0,0,0,.15); }
/* spinner */
.tpd-skin-purple .tpd-spinner-spin {
  border-color: rgba(255,255,255,.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-purple a { color: #ddd; }
.tpd-skin-purple a:hover { color: #c6c6c6; }

Once the CSS has been added the skin can be used by the skin option:

skin: 'purple'
purple
! Important: When adding custom skins it's recommended to do this in separate files, this will allow upgrading of Tipped without breaking anything.

Options

Default options can be set for a skin by extending Tipped.Skins:

$.extend(Tipped.Skins, {
  'purple': {
    radius: false,
    shadow: false
  }
});

Behaviors

It's recommended to avoid storing options on a skin that involve things other than layout. Tipped provides Behaviors to help with this. If you need to recycle options, it's best to create a behavior and use it alongside the skin option:

// add a custom behavior
$.extend(Tipped.Behaviors, {
  'custom-slow': {
    fadeIn: 600,
    fadeOut: 600
  }
});

// use behavior alongside the skin option
Tipped.create('#custom-behavior-slow', "Slowly!", {
  behavior: 'custom-slow',
  skin: 'purple'
});
Custom Behavior

Sizes

Extra sizes can be added through CSS:

/* huge */
.tpd-size-huge .tpd-content,
.tpd-size-huge .tpd-title {
  padding: 15px;
  font-size: 15px;
  line-height: 20px;
}
.tpd-size-huge .tpd-background { border-radius: 10px; }
.tpd-size-huge .tpd-stem {
  width: 24px;
  height: 12px;
  margin-left: 8px; /* space from the side */
  margin-top: 2px; /* space between stem and target */
}
.tpd-size-huge.tpd-no-radius .tpd-stem { margin-left: 10px; }
.tpd-size-huge .tpd-close { margin: 11px 5px 11px 5px; }
.tpd-size-huge .tpd-close-icon { font-size: 32px; }
.tpd-size-huge .tpd-spinner {
  width: 66px;
  height: 50px;
}
.tpd-size-huge .tpd-spinner-spin { margin: 14px 0 0 22px; }
.tpd-size-huge .tpd-spinner-spin,
.tpd-size-huge .tpd-spinner-spin:after {
  width: 22px;
  height: 22px;
}

Use them with the size option:

size: 'huge', skin: 'purple'
Huge

Default skin

To change the default skin for all tooltips use Tipped.setDefaultSkin:

Tipped.setDefaultSkin('purple');
×