Bootstrap: Alternative tooltip positioning library

Created on 4 Apr 2016 · 13Comments · Source: twbs/bootstrap

I've built my career around Bootstrap, developing and maintaining Bootstrap Material Design. Recently I've started working with BS v4, particularly with the new tooltips and popovers powered by Tether.js.

I rapidly got frustrated by them for several reasons...

That inspired me to create Popper.js, a library to manage tooltips, popovers, dropdowns and so on.

It's the result of several years of experience with complex web interfaces which heavily use "poppers" for UX purpose and it spots a long list of features including:

half the size of Tether.js (just ~3.5KB);
No CSS dependencies;
No dependencies required;
Supports automatic detection of the tooltip size (included its arrow) to correctly position the tooltip near its reference element, without need to specify offsets manually;
It's fully tested by Karma + Jasmine;
When you scroll, you don't notice any lag in the popper movement;
You can append your tooltip element on any element in the page, not just the body (and everything will still work properly);
Popper.js, has automatic support for tooltip element creation. You can define its content, the markup of its arrow and everything you'd expect;
It supports a plugin system you can use to customize the behavior of the library;
Particular "flip" behaviors are supported, for example if there's not enough space on the left, you can ask the popper to be placed on the bottom of the reference element;
The whole code is fully documented using JSDoc;
Licensed under MIT;
update:
Written in ES6;
Includes a side library almost identical to the tooltip.js library of Bootstrap;
Active community with responsive maintainers;
Performance optimizations such as 60fps throttling and passive events support;
Absolutely clear code base, easy to modify and patch;
auto placement option;

I’d love for you to check out my library and integrate it with Bootstrap V4.

Here the link to the demo page:
http://popper.js.org/

and of the GitHub repo:
https://github.com/FezVrasta/popper.js

Would you be open to a PR?
Please reach out to me with feedback our questions about Popper.js!

Update:

The library has been rewritten in ES6 and its API improved (also, more features have been added), we are finalizing it.
Right now we are writing a side-library with an API very similar to the one used by Bootstrap tooltips, once it will be ready we'll release the new version.
This is being done because our plan is to first replace Tether.js with Popper.js in Bootstrap Material Design v4 to prove the quality of the library and the ease of integration of it.

Popper.js has been successfully adopted by Atlassian and by Le Roy Merlin and both are really happy with it.

Update 2:

Popper.js V1 has been released along with Tooltip.js, I worked to improve the code quality and now it scores 4/4 on Code Climate and 99 on bitHound.
I also added code coverage reports and it's at 91% right now (actually a bit more, but Karma doesn't properly merges the code coverages from IE10)
We added much more tests, we now have around 150 tests ran on Chrome, Firefox, Safari, IE10, IE11 and Edge.
Companies like Microsoft in WebClipper and Atlassian are using it in production and they are very happy! 🎉

js v4

Source

FezVrasta

👍29

Most helpful comment

I know the issue is closed, but seems relevant to add a link to Tippy.js.

It's a library for tooltips and pop-overs based on Popper.js, I think it's a good way to show you what you could achieve using my library inside Bootstrap.

Here's a set of open issues related to Tether bugs, I think it can be useful to consider the options and requirements:

FezVrasta on 5 Apr 2017

👍7

All 13 comments

@cvrebert any chance to get a feedback about this issue?

Thanks!

FezVrasta on 21 May 2016

@patrickhlauke or @cvrebert Still waiting for feedback please.

FezVrasta on 27 Jul 2016

Thoughts @fat?

mdo on 12 Sep 2016

❤2

@mdo and @fat I have added some updated informations to the first post, maybe they can be useful to help you decide.

FezVrasta on 18 Sep 2016

I think the most requested feature for Popovers is 'auto' positioning like in BS3. As a responsive framework popovers are useless otherwise.
I just checked and one can get the expected behavior with tether using the constraints

constraints     : [{to: 'window', pin: ['left', 'right']}],

The only thing left to do is adjusting the scss and setting the arrow position.

As mentioned in another thread there are also more positioning options in Tether, no reason to not support them.

@mdo I implemented auto positioning for placements 'top' and 'bottom' via config.auto option. Only problem is this change in alpha 5: https://github.com/twbs/bootstrap/commit/8ef66df6d793afbda487c1a4505d0a6576252ec4
Had to use the previous version, because you cannot position a pseudo element via JS.

New code, it is pretty basic..

        let constraints = this.config.constraints.slice()
        const repositionArrow = false
        if (this.config.auto && ['top', 'bottom'].indexOf(placement) > -1) {
          repositionArrow = true
          constraints.push({to: 'window', pin: ['left', 'right']})
        }

        this._tether = new Tether({
         ...
          constraints     : constraints,
         ...
        })

        if (repositionArrow) {
          this._tether.on('repositioned', (event) => {
            let $arrow = $(tip).find(Selector.ARROW)
            $arrow.css({
              left: $(this.element).offset().left
                - $(tip).offset().left
                + $(this.element).width() / 2
            })
          })
        }

krisdigital on 26 Oct 2016

@krisdigital the way you implemented auto is a very simple method, it will flip only when there's not enough space. (this is something easily implementable with Popper.js defining a custom flipBehavior)

The feature we are going to merge in Popper.js instead calculates the available space on the 4 sides and decides the one with more space available.

FezVrasta on 7 Nov 2016

@FezVrasta The example does not flip anything, it just prevents the tooltip from moving left or right outside the window. The flipping behavior you described is also something supported by tether, it is some option called attachment:together if I remember correctly.. But it is something I did not need.

krisdigital on 8 Nov 2016

@krisdigital I'm pretty sure Tether doesn't check for the best placement but it just allows to flip from bottom to top and from left to right (and vice-versa).

FezVrasta on 11 Dec 2016

@mdo we just finished to write a side-library based on Popper.js that mimics the behaviour of the Bootstrap tooltip.js script.

https://github.com/FezVrasta/popper.js/tree/v1-dev#tooltipjs

I think this could come in handy if you decide to switch to Popper.js since you will just have to use the existing library and wrap it with jQuery (to add multi-element support)

FezVrasta on 16 Dec 2016

I think we're going to end up passing on this for now. I don't want to leave you hanging, but it seems unlikely that we'll be switching at this point. I'm happy to continue the conversation for subsequent v4 releases though as folks start to use this more!

mdo on 23 Dec 2016

would you be open to a PR for this?

FezVrasta on 23 Dec 2016

I know the issue is closed, but seems relevant to add a link to Tippy.js.

It's a library for tooltips and pop-overs based on Popper.js, I think it's a good way to show you what you could achieve using my library inside Bootstrap.

Here's a set of open issues related to Tether bugs, I think it can be useful to consider the options and requirements: