Lalit
Lalit's Blog

Lalit's Blog

React tiny tooltip - a react library to create beautiful tooltips

React tiny tooltip - a react library to create beautiful tooltips

A brief overview of why and how I created a react library to simplify building tooltips

Lalit's photo
Lalit
·Jun 26, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

You can also read the article here: lalit.codes/blog/react-tiny-tooltip

I built a small and lightweight react library for my projects sometime ago for creating beautiful and accessible tooltips in react - React Tiny Tooltip. I'm happy to open source it now!

image.png

This short blog goes through briefly about this package.

Using the library

import React from "react";
import { Tooltip } from "react-tiny-tooltip";

export default () => (
  <div>
    <Tooltip content="Hello there" side="top">
      <button>Hover here!</button>
    </Tooltip>
  </div>
);

Here's how it would look

image.png

GitHub RepoDocumentation website

Inspiration

I built a tooltip when I was building a project - Paperclip. I liked the tooltips that I built in Paperclip and wanted to reuse it in all my other projects, so I went ahead and created react-tiny-tooltip. I've used it in all my projects from then. But this repo was closed source from a long time. So I just found some free time this weekend to open source this. Hope you like it ✌️

Libraries used

List of all libraries used in creating this package

  • tsup for bundling code
  • Hyperdocs for creating docs (an other project by me ;))
  • Radix UI for the unstyled tooltip component
  • Stitches for styling the tooltip
  • np for managing releases
  • Typescript to provide type definitions for the package

I've purposefully limited the props that can be passed to the component so as to reduce the complexity.

The available props currently are arrow, delay, side and sideOffset.

Building documentation

I used my own project Hyperdocs for creating docs for this project. I'm biased but I was able to complete the docs in no time. All I did was added a bunch of markdown files and linked it with Hyperdocs. This process was much simple than what I had to do for my other project StaticShield with Nextra.

With Hyperdocs I was able to add add code previews right inside the docs for each prop. This helps you play with the library while reading the docs along side.

image.png

React components as tooltip content

This is one of the main reason why I created this library. Most of the libraries only support rendering text in the tooltip. But react-tiny-tooltip can render any react fragment as tooltip content too!

image.png

Get started now by running

npm install react-tiny-tooltip

Thanks for reading this small article 😄

Let me know your suggestions below in the comments section.
You can also submit feedback from the docs.
Feel free to open PRs and issues on the repo

Did you find this article valuable?

Support Lalit by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this