<header class="header">
<a href="https://cooltipz.jackdomleo.dev" target="_blank">
<img src="https://cooltipz.jackdomleo.dev/img/header-logo.png" alt="Cooltipz.css logo" />
<h1 hidden>Cooltipz.css</h1>
</a>
<h2>Cool customisable tooltips made from pure CSS</h2>
<p class="m-0">A pure CSS tooltip library that is lightweight, modern, accessible, customisable and easy to use.</p>
<div>
<a href="https://github.com/JDomleo/Cooltipz.css" rel="nofollow noopener" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/stars/JDomleo/Cooltipz.css?style=social" /></a>
<a href="https://github.com/JDomleo/Cooltipz.css/releases" rel="nofollow noopener" target="_blank"><img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/JDomleo/Cooltipz.css?style=social" /></a>
<a href="https://www.npmjs.com/package/cooltipz-css" rel="nofollow noopener" target="_blank"><img alt="npm" src="https://img.shields.io/npm/dt/cooltipz-css?logo=npm&style=social" /></a>
<img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/cooltipz-css?label=JsDelivr%20hits&logo=jsdelivr&style=social" />
</div>
<a href="https://cooltipz.jackdomleo.dev" target="_blank" class="link">View official docs</a>
</header>
<main>
<section>
<div>
<button data-cooltipz-dir="left" aria-label="Hello there!">Left</button>
<button data-cooltipz-dir="top" aria-label="Hello there!">Top</button>
<button data-cooltipz-dir="bottom" aria-label="Hello there!">Bottom</button>
<button data-cooltipz-dir="right" aria-label="Hello there!">Right</button>
</div>
<div>
<button data-cooltipz-dir="bottom-left" aria-label="Hello there!">Bottom left</button>
<button data-cooltipz-dir="top-left" aria-label="Hello there!">Top left</button>
<button data-cooltipz-dir="top-right" aria-label="Hello there!">Top right</button>
<button data-cooltipz-dir="bottom-right" aria-label="Hello there!">Bottom right</button>
</div>
<div>
<button data-cooltipz-dir="top" data-cooltipz-size="small" aria-label="Hello there! I am a small tooltip and I will wrap the text within me.">
Small
</button>
<button data-cooltipz-dir="top" data-cooltipz-size="medium" aria-label="Hello there! I am a medium tooltip and I will wrap the text within me. I'm wider thhan the small tooltip.">
Medium
</button>
<button data-cooltipz-dir="top" data-cooltipz-size="large" aria-label="Hello there! I am a large tooltip and I will wrap the text within me. I'm wider thhan the small and the medium tooltip.">
Large
</button>
<button style="min-width: 8rem;" data-cooltipz-dir="top" data-cooltipz-size="fit" aria-label="Hello there! I am a 'fit' tooltip and I will wrap the text within me. My width will always be equal to the width of my parent element.">
Fit
</button>
</div>
<div>
<button data-cooltipz-dir="top" data-cooltipz-static aria-label="Hello there!">
No animation
</button>
<button data-cooltipz-dir="top" data-cooltipz-visible aria-label="Hello there!">
Visible
</button>
</div>
<div>
<button data-cooltipz-dir="top" aria-label="HTML character codes: © ® ☎ ♺ ∅">HTML Codes ♫</button>
<button data-cooltipz-dir="top" aria-label="Emojis: 😎🚗🍔💩👏✔❤">Emojis 😎</button>
<button data-cooltipz-dir="top" aria-label="Multilingual: こんにちは | ਸਤ ਸ੍ਰੀ ਅਕਾਲ | हैलो">Multilingual</button>
<button data-cooltipz-dir="top" aria-label="Font Awesome:    ">Font Awesome</button>
</div>
</section>
<p>Made with <span aria-label="coolness" data-cooltipz-dir="top">😎</span> by <a href="https://jackdomleo.dev" rel="nofollow" target="_blank" class="link">Jack Domleo</a></p>
<p>Don't forget to give this pen a <span aria-label="love" data-cooltipz-dir="top">❤️</span> and <span aria-label="star" data-cooltipz-dir="top">⭐</span> the <a href="https://github.com/JDomleo/Cooltipz.css" class="link" rel="nofollow noopener" target="_blank">GitHub repo</a>.</p>
<hr />
<section>
<h3>Customisation - get creative!</h3>
<p>To customise your tooltips, use the CSS custom properties for Cooltipz.css <a href="https://cooltipz.jackdomleo.dev/#customisation" target="_blank" rel="noreferrer" class="link">defined here</a>. Use the examples below for inspiration, but be sure to play around with the HTML and CSS in this pen!</p>
<div>
<button class="custom--small" data-cooltipz-dir="left" data-cooltipz-size="small" aria-label="Smaller width than the default small">
.custom--small
</button>
<button class="custom--medium" data-cooltipz-dir="top" data-cooltipz-size="medium" aria-label="Smaller width than the default medium">
.custom--medium
</button>
<button class="custom--large" data-cooltipz-dir="right" data-cooltipz-size="large" aria-label="Smaller width than the default large">
.custom--large
</button>
</div>
<div>
<button class="custom--revert" data-cooltipz-dir="top" aria-label="White background and black text">.custom--revert</button>
<button class="custom--help" data-cooltipz-dir="top" aria-label="Help cursor">.custom--help</button>
<button class="custom--delay" data-cooltipz-dir="top" aria-label="I have a timed delay">.custom--delay</button>
</div>
<div>
<button class="custom--far" data-cooltipz-dir="top" aria-label="Moves a lot into view">.custom--far</button>
<button class="custom--still" data-cooltipz-dir="top" aria-label="I stay still">.custom--still</button>
<button class="custom--opposite" data-cooltipz-dir="top" aria-label="I move the opposite way">.custom--opposite</button>
</div>
<div>
<button class="custom--big custom--revert" data-cooltipz-dir="left" aria-label="I'm pretty big">.custom--big.custom--revert</button>
<button class="custom--big" data-cooltipz-dir="top" aria-label="I'm pretty big">.custom--big</button>
<button class="custom--big custom--revert" data-cooltipz-dir="top" aria-label="I'm pretty big">.custom--big.custom--revert</button>
<button class="custom--big" data-cooltipz-dir="right" aria-label="I'm pretty big">.custom--big</button>
</div>
<div>
<button class="custom--arrow" data-cooltipz-dir="left" aria-label="I look like an arrow">.custom--arrow</button>
<button class="custom--round" data-cooltipz-dir="top" aria-label="Hi, I'm round!">.custom--round</button>
<button class="custom--sharp" data-cooltipz-dir="top" aria-label="Hi, I'm sharp!">.custom--sharp</button>
<button class="custom--pointy" data-cooltipz-dir="right" aria-label="I'm pointy!">.custom--pointy</button>
</div>
<div>
<button class="custom--slow" data-cooltipz-dir="top" aria-label="I'm very slooow...">.custom--slow</button>
<button class="custom--slow custom--far" data-cooltipz-dir="top" aria-label="I move far but very slooow...">.custom--slow.custom--far</button>
<button class="custom--slow custom--still" data-cooltipz-dir="top" aria-label="I stay still but appear very slooow...">.custom--slow.custom--still</button>
<button class="custom--slow custom--opposite" data-cooltipz-dir="top" aria-label="I move far in the opposite way but very slooow...">.custom--slow.custom--opposite</button>
</div>
<div>
<button class="custom--border" data-cooltipz-dir="left" aria-label="I have a custom border">.custom--border</button>
<button class="custom--border-2" data-cooltipz-dir="top" aria-label="I have a custom border">.custom--border-2</button>
<button class="custom--border-3" data-cooltipz-dir="right" aria-label="I have a custom border">.custom--border-3</button>
</div>
</section>
</main>
<aside class="github-corner__wrapper">
<a href="https://github.com/JDomleo/Cooltipz.css" target="_blank" class="github-corner" aria-label="View source on GitHub">
<svg viewBox="0 0 250 250" aria-hidden="true">
<path d="M0 0l115 115h15l12 27 108 108V0z" />
<path class="octo-arm" d="M128.3 109c-14.5-9.3-9.3-19.4-9.3-19.4 3-6.9 1.5-11 1.5-11-1.3-6.6 2.9-2.3 2.9-2.3 3.9 4.6 2.1 11 2.1 11-2.6 10.3 5.1 14.6 8.9 15.9" fill="currentColor" />
<path class="octo-body" fill="currentColor" d="M115 115c-.1.1 3.7 1.5 4.8.4l13.9-13.8c3.2-2.4 6.2-3.2 8.5-3-8.4-10.6-14.7-24.2 1.6-40.6 4.7-4.6 10.2-6.8 15.9-7 .6-1.6 3.5-7.4 11.7-10.9 0 0 4.7 2.4 7.4 16.1 4.3 2.4 8.4 5.6 12.1 9.2 3.6 3.6 6.8 7.8 9.2 12.2 13.7 2.6 16.2 7.3 16.2 7.3-3.6 8.2-9.4 11.1-10.9 11.7-.3 5.8-2.4 11.2-7.1 15.9-16.4 16.4-30 10-40.6 1.6.2 2.8-1 6.8-5 10.8L141 136.5c-1.2 1.2.6 5.4.8 5.3z" />
</svg>
</a>
</aside>:root {
--cooltipz-fontawesome: FontAwesome;
}
.custom {
&--small {
--cooltipz-small: 4.5rem;
}
&--medium {
--cooltipz-medium: 8rem;
}
&--large {
--cooltipz-large: 12rem;
}
&--revert {
--cooltipz-bg-color: #fff;
--cooltipz-text-color: #000;
--cooltipz-border-color: #fff;
}
&--help {
--cooltipz-cursor: help;
}
&--delay {
--cooltipz-delay-show: 1s;
--cooltipz-delay-hide: 2s;
}
&--far {
--cooltipz-slide: 50px;
}
&--still {
--cooltipz-slide: 0;
}
&--opposite {
--cooltipz-slide: -50px;
}
&--big {
--cooltipz-font-size: 1.6rem;
--cooltipz-arrow-size: 1rem;
}
&--arrow {
--cooltipz-arrow-size: 1.5rem;
--cooltipz-border-radius: 0;
}
&--round {
--cooltipz-border-radius: 5rem;
}
&--sharp {
--cooltipz-border-radius: 0;
}
&--pointy {
--cooltipz-arrow-size: 0.82rem;
--cooltipz-border-radius: 0;
}
&--slow {
--cooltipz-timing: 3s;
}
&--border {
--cooltipz-border-color: #f00;
--cooltipz-border-width: 2px;
&-2 {
--cooltipz-border-color: #0f0;
--cooltipz-border-width: 2px;
--cooltipz-border-style: dashed;
}
&-3 {
--cooltipz-border-color: #000;
--cooltipz-border-width: 2px;
--cooltipz-text-color: #000;
--cooltipz-bg-color: #fff;
}
}
}
/* Nothing to do with Cooltipz.css, just making the examples look pretty */
body {
min-height: 100%;
font-family: Verdana, Arial, sans-serif;
padding-bottom: 2rem;
}
body,
main,
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
main {
div {
margin: 2rem;
display: flex;
align-items: center;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
}
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0);
}
20%,
60% {
transform: rotate(-25deg);
}
40%,
80% {
transform: rotate(10deg);
}
}
.github-corner {
&:hover {
.octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
}
svg {
border: 0;
color: #fff;
fill: #151513;
left: 0;
position: absolute;
top: 0;
transform: scale(-1, 1);
}
.octo-arm {
transform-origin: 8.125rem 6.625rem;
}
&__wrapper {
display: block;
height: 5rem;
width: 5rem;
position: absolute;
top: 0;
left: 0;
a,
svg {
height: 100%;
width: 100%;
display: block;
}
}
}
@media (max-width: 31.25em) {
.github-corner {
&:hover {
.octo-arm {
animation: none;
}
}
.octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
}
}
// npm i cooltipz-css --save
//
// yarn add cooltipz-css
//
// https://cooltipz.jackdomleo.dev
//
// Created by Jack Domleo
// https://jackdomleo.dev | @JackDomleo
//
// If you can customise any other tooltips that you'd like to have featured on here, tweet about it on Twitter with the hashtag #cooltipzcss and tag @jackdomleo7
External CSS
- https://cooltipz.jackdomleo.dev/css/docs.min.css
- https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
- https://cdn.jsdelivr.net/npm/cooltipz-css/cooltipz.min.css
- https://fonts.googleapis.com/css?family=Cookie
External JavaScript
This Pen doesn't use any external JavaScript resources.