This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Coffeekraken tooltip style

Full stack tooltip styling supporting multiple sides and colors. Fully customizable as well.

Table of content

1. Features
2. Install
3. Get Started
4. SCSS API
5. Coffeekraken

Features

1. Fully customizable
2. Support every sides tl t tr l r bl b br c
3. Support colors
4. Default style available if needed

Install

npm install @coffeekraken/tooltip-style --save

Get Started

First, import and init sugar into your project.

Then, import the component into your scss file like so:

@use 'node_modules/@coffeekraken/tooltip-style/index' as tooltip-style;

Then, generate the classed using the provided mixins like so:

@include tooltip-style.classes(
	$sides: tr t tl l r bl b br c,
	$colors: default primary secondary
);

Then simply use it inside your html like so:

<a class="btn">
	Display a tooltip
	<div class="tooltip">I'm a cool tooltip</div>
</a>
<a class="btn btn--primary">
	Display a top left tooltip
	<div class="tooltip tooltip--tl tooltip--primary">I'm a cool tooltip</div>
</a>
<div>
	Display a top right tooltip
	<div class="tooltip tooltip--tr tooltip--secondary">I'm a cool tooltip</div>
</div>

Coffeekraken

We are a young collective of front-end creative developers with one goal in mind. Build tools to make every team working day life better. This is our first and only concern. All our tools are build around that purpose. All what we provide are some cool tools that you can use the way you want. These tools features cover a large scope of the front-end workflow (styleguide generation, colors/fonts management, etc...). You can use only the parts that you need and let the rest aside...