= A new version of this script is available: Tipped 4


Skins are basically groups of options that help avoid code repetition. The options defined within a skin can be applied to multiple elements at the same time. To use a skin the only option required is the skin option, the options of the skin are then applied as a starting point.

Tipped.create("#my_tooltip", "Nice!", { skin: 'white' });

Additional options will overwrite what you've defined on the skin:

Tipped.create("#my_tooltip", "Nice!", {
  skin: 'white',
  border: { size: 5 }

Creating skins

All skins are based of a base and reset skin defined in tipped.js. The reset skin works much like a CSS reset on the base skin. Every other skin inherits its options from the base skin after it has been reset.

Because of this inheritance the only things that have to be defined when creating a new skin are the Options you don't want to base on the defaults. Here's how you would create a custom skin:

$.extend(Tipped.Skins, {
  'custom' : {
    border: { size: 4, color: '#959fa9' },
    background: '#f7f7f7',
    radius: { size: 4, position: 'border' },
    shadow: false,
    closeButtonSkin: 'light'

CSS - Styling tooltip content

All styling related to the content of the tooltip is defined in tipped.css. To style the content of a tooltip an element with the class .t_Content_SKINNAME can be targetted, for example:

.t_Content_custom {
  color: #333;
  font-size: 10px;
  line-height: 16px;
  padding: 7px 8px;
.t_Content_custom a,
.t_Content_custom a:hover {
  color: #5daae2;
  text-decoration: none;
  background: none;
  border: 0;
.t_Content_custom a:hover {
  color: #57a1d6;
  text-decoration: underline;

There's also a class .t_Tooltip_SKINNAME set on the tooltip container.

Important: It's recommended to place CSS rules of your custom skins in a separate file so you can safely upgrade tipped.css without losing anything.

Using skins

Now that the Javascript and CSS are in place the skin can be applied with the skin option:

Tipped.create("#demo_custom_skin", "This tooltip has a custom skin", {
  skin: 'custom',
  hook: 'topleft'
Custom skin

Important: It's recommended to place custom skins in a separate file and include it below tipped.js. That way you can safely upgrade tipped.js without losing anything.

Changing the default skin

Tipped.setDefaultSkin can be used to change the default skin from 'black' to a custom skin. It should be called after the tipped.js include, for example:

<script type='text/javascript' src='/js/tipped/tipped.js'></script>
<script type='text/javascript' src='/js/tipped/tipped-custom-skins.js'></script>

<script type='text/javascript'>

Close Buttons

Close buttons are defined the same way, they have a base and reset skin in tipped.js. Close button skins you've defined can be set on tooltip skins using the closeButtonSkin option:

closeButtonSkin: 'light'

Note: It's recommended to put custom close button skins in a separate file along with your custom skins.


The loading animations are created using a small library called Spinners. Documentation for the possible options is available on the Spinners GitHub page. These options can be set using the spinner option:

spinner: {
  color: '#000',
  radius: 5,
  height: 5,
  width: 1.8,
  dashes:  12,
  opacity: 1,
  padding: 3,
  rotation: 700
Sign in