Our Super Simple Tooltip
April 16, 2015 |

TL:DR You might not need as many 3rd party libraries as you think. We built our own tooltip library: https://github.com/mailmangroup/kawo-tooltip/

image

By June 2014, the minified javascript for the KAWO app had grown to over 600kb. This was not a disaster, but it didn’t need to be so big. One of the reasons it had grown was because we were including too many 3rd party javascript libraries, and in each case using only a small percentage of the functions. We needed to be more careful when adding new features.

 Adding New Features

Now when we add new features we try to avoid including 3rd party libraries unless:

  1. We use them extensively (e.g. backbone or underscore)

  2. They are lean and focused without endless config options

Back in July of 2014, we replaced moment.js (60kb) with our own functions that extended Javascript’s native Date prototype (1.6kb). So, in March 2015 when we needed a tooltip, we looked at the 3rd party tooltip libraries and soon decided that we had to write our own.

Almost all 3rd party libraries had lots of things we didn’t need and you probably don’t need either…

  • animation
  • options
  • themes

Creating Our Own Tooltip

To start we needed an example of how the end result should look and behave. Google Doc’s tooltip was almost perfect: simple, informative, and not too fancy.

image

Within a matter of minutes we had a basic demo working in a JSfiddle and within a few hours it was finished and published to github as a bower package. image

The Benefits of Lightweight

Without configuration, the tooltip only needs one data attribute to be set, keeping your HTML cleaner and more manageable. Furthermore, not depending on external CSS means your browser makes less requests, speeding up page load time.** **

The tooltip is positioned according to the target elements place in the viewport, with no wasted code or requirement for the developer to specify position with options like “bottom-left” or “top-right”.

No configuration options meant no need for extensive documentation and code examples, making KAWO tooltips developer friendly. Why create API options for styling the tooltip when this can be done using plain CSS which all web developers should already know?

Not only do you not need to comb through an API to learn configuration options, you don’t even need to call the function to initialize it. The script even does that for you.

Our finished tooltip also has zero dependencies, not even the ubiquitous jQuery. A couple of years ago almost everything was a jQuery plugin, but recently this has changed and in most cases we now write pure JS. This return to writing pure JS has only been possible because modern browsers are so consistent in their JS support. In testing we only had to make 1 fix for browser support.

You can find the end result here on github:

https://github.com/mailmangroup/kawo-tooltip/

So how does the KAWO tooltip compare to other libraries?

In order to keep our tooltip super simple we did have to leave out most features, but we think the trade off was worth it. The table below shows just how much bloat there is with the majority of existing 3rd party tooltip libraries.

Pure JS: Zero Dependencies

Zero Config Options

No external CSS*

Multuple tooltips on 1 element

Simple documentation

Control over position

Theming

Self-initialise

Size (kb)

KAWO
Tooltip

Y

Y

Y

N

Y

N

N

Y

1.8

Darsain Tooltip

Y

N

N

N

N

Y

Y

Y

10.5

qTip2

N

N

N

N

N

Y

Y

Y

18

Bootstrap Tooltip

N

N

N

N

N

Y

N

Y

8

iamceege/
tooltipster

N

N

N

Y

N

Y

Y

N

17.5

For all the latest updates follow KAWO on WeChat.

Leave a comment

Your email address will not be published. Required fields are marked *

Leave a comment...
Enter your name (people will see this) (required)
Enter your email (people won't see this) (required)

Back to blog