Styling

Every tooltip's layout (what defines tooltip's margins, paddings, and overall dimensions) should be defined in baseClass, which is tooltip by default.

Arrow is styled with :after pseudo element.

The gap between tooltip and its target position (to arrow won't overlap the target) is defined as a top property of baseClass.

The baseClass with minimum required styles will than look like this:

.tooltip {
	position: absolute;
	padding: .8em 1em;
	top: 15px; /* Defines the spacing between tooltip and target position */
	max-width: 200px;
	color: #fff;
	background: #222;
}

Place classes

The current place is always attached to a tooltip as a class name. For example, when current tooltip place is left-top, the tooltip element will have a left-top class.

Type class

Type class should defined only visual/color changes from the baseClass. This is what you'd use for states like success, error, ...

Hidden class

The hiddenClass doesn't have to be styled at all, as tooltip is removed from DOM element when hidden. It is used mainly for styling transitions.

Effect class

The effectClass is attached to a tooltip at all times, and transitions are styled based on a presence of hiddenClass.

Example fade transition:

.tooltip.fade { transition: opacity 100ms ease-out; } /* faster fade in than fade out */
.tooltip.fade.hidden { opacity: 0; transition-duration: 200ms; }

When Tooltip is hiding the tip, it detects the presence of transition-duration and delays the DOM removal until the transition is over.

Some transitions, like slide in, are dependent on toooltip position, in which case you'll leverage the place classes.

Example slide transition class:

.tooltip.slide {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
	transition: -webkit-transform 100ms ease-out;
	transition: transform 100ms ease-out;
	transition-property: -webkit-transform, opacity;
	transition-property: transform, opacity;
}
.tooltip.slide.hidden {
	opacity: 0;
	transition-duration: 200ms;
}
.tooltip.slide.hidden.top,
.tooltip.slide.hidden.top-left,
.tooltip.slide.hidden.top-right {
	-webkit-transform: translateY(15px);
	transform: translateY(15px);
}
.tooltip.slide.hidden.bottom,
.tooltip.slide.hidden.bottom-left,
.tooltip.slide.hidden.bottom-right {
	-webkit-transform: translateY(-15px);
	transform: translateY(-15px);
}
.tooltip.slide.hidden.left,
.tooltip.slide.hidden.left-top,
.tooltip.slide.hidden.left-bottom {
	-webkit-transform: translateX(15px);
	transform: translateX(15px);
}
.tooltip.slide.hidden.right,
.tooltip.slide.hidden.right-top,
.tooltip.slide.hidden.right-bottom {
	-webkit-transform: translateX(-15px);
	transform: translateX(-15px);
}

Custom class types

You can define custom class types by pushing their names into a Tooltip.classTypes array. By default this array looks like this:

Tooltip.classTypes = ['type', 'effect'];

It specifies the dynamic class types, that's base & hidden are not in it, as those are core classes used for other purposes.

To add a new dynamic class type state, you can do:

Tooltip.classTypes.push('state');

You can than define this class in options like so:

var tip = new Tip('Foo bar', {
	stateClass: 'not-good'
})

And use in runtime:

tip.changeClassType('state', 'bit-better');

Or you can even extend Tooltip and define a .state() method shorthand:

Tooltip.prototype.state = function (name) {
	return this.changeClassType('state', name);
};