mohsinulhaq/react-popper-tooltip

A React hook to effortlessly build smart tooltips.

react-popper-tooltip's Issues

Ability to close tooltips on Escape key

Hey! Thanks for a great package 💞 It vastly simplified me working with Popper and creating dropdowns!

One thing that's kinda common for popovers/dropdowns is to close them on escape key. Could this fit into this package, you think?

The requirements could be something like:

• Make it close on keydown event, with key escape as default.
• Provide a way to opt out of the default behaviour (closeOnEscape: false as a passed prop).

I guess one can implement support for super custom cases here, like the ability for consumers to decide what DOM event and what key should trigger the close, but I think it'd be nice to keep it simple for now.

Let me know if I can help out with a PR.

I've implemented a quick fix in a fork of mine in the meantime, which code you can view here: brookback#1.

Add 'focus' trigger

Is your feature request related to a problem? Please describe.
While click and hover are relevant triggers in most cases, the use of focus for triggering the tooltip is sometimes needed when using keyboard navigation.

Describe the solution you'd like
Add a 'focus' trigger in addition to the existing click, right-click, and hover triggers.

Describe alternatives you've considered
n/a

Additional context
n/a

Problems with `touchend` event handling

Unfortunately, a fix that I suggested for the issue #34 together with a fix for the #56 introduces some serious issues with handling click events triggered from control inside a tooltip.

On a mobile device that supports both click and touchend events touchend "outside click" handler intercepts all events, eg. click on a button inside the tooltip.

https://codesandbox.io/s/6xwrm2zxrr

When followCursor is true, the tooltip isn't respecting boundaries

I'm trying to use this library to build a context menu that's gonna show up at the exact mouse position on right click. So I'm using trigger="right-click" followCursor={true} and it's fine, except the popper doesn't move to the other side when it doesn't have enough space or if it's out of the scroll area.

Any ideas?

Update deprecated sub-dependency

Describe the bug
Latest version of the react-popper-tooltip depends on v1 of the react-popper library, which by itself depends on v1 of popper.js. poperjs v1 is deprecated in favor of @popperjs/core package.

Additional context
There is already new version of the react-popper (latest is 2.2.3) which depends on a newer @popperjs/core (and it is a peer dependency now).

Tooltip appears even after mouse leaves the trigger

Even if the mouse is not hovering over the trigger element, the tooltip will still appear.

1. Go to the basic example (here)
2. Modify the code to pass { delayShow: 1000 } to usePopperTooltip
3. Hover over the button, then move the cursor away and stop moving it
4. The tooltip still appears, and will stay until the mouse moves again

Ideally, the tooltip should not appear, but it does probably because of the changes in #115

Windows 10
Chrome, Edge
Latest

Code Sandbox link in README has broken preview

Following the Example link on the homepage leads to a Codepen with a broken preview.

Blurry text

Edited: Sorry, gave faulty information about the blurry text last time. Updated now, will provide codesandbox example later if i got some extra time.

The text within the tooltip is blurry in chrome when x and y is not evenly divideable by 4 in translate3d.
Examples:

Clear text example => transform: translate3d(192px, 344px, 0px).
Here 192/4 = 48. and 344/4 = 86. So both x and y are being integers.

Blurry text example => transform: translate3d(6px, 30px, 0px).
Here 6/4 = 1.5. and 30/4 = 7.5. So both x and y have decimals.
It will also be blurry if either of x or y have some decimals after divided by 4.

Scrolling causes overflowing issues

Describe the bug

When tooltips are placed inside a scrolling area, hovering above them and scrolling produces weird results, namely tooltips remaining open and outside the scrolling area.

To Reproduce

Here is a CodeSandbox with an MRE.

Expected behavior

When scrolling, tooltips should be closed or at least be hidden when "overflowing" the scrolling area.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge (Chromium)
• Version: 89

Please let me know if I can be of further assistance (more details) and my apologies if this issue has a known workaround, I could not find one.

Multiple tooltips inside of a scrollable container

Describe the bug
Since v4.0.0, we expected to have some bad interactions between react-popper-tooltip and scroll. With trigger: 'hover, in a scrollable container with multiple tooltips, hover one of those, then scroll without moving the mouse. You'll have multiple tooltips that will shows (while only one at a time was displayed before).

To Reproduce
I've made this codesandbox that reproduces the problem, but not on every scroll, try multiple times ans it sometimes have the issue :
Please have a look at the GIF in the screenshots to see the problem.

Expected behavior
Should have only one tooltip at a time.

Screenshots

Desktop (please complete the following information):

• OS: MacOS/Linux/Windows
• Browser: Chrome/Firefox
• Version: latest

Add looser peer dep requirements for react and react-dom?

QQ: Would it be possible to loosen the react and react-dom peer dep restrictions to ^16.0.0 or are there explicit dependencies on react 16.6+ features in this library?

Issue with types after upgrading to v4.0.0

Describe the bug
After upgrading to v4.0.0 I've been reproducing the following issue with Typescript:
'node_modules/react-popper-tooltip/dist/cjs/react-popper-tooltip.js' implicitly has an 'any' type. Try 'npm i --save-dev @types/react-popper-tooltip' if it exists or add a new declaration (.d.ts) file containing 'declare module 'react-popper-tooltip';

To Reproduce
import { usePopperTooltip } from 'react-popper-tooltip';

Additional context
Looking at package.json I've the feeling this bug is due to wrong path for "typings":
"typings": "dist/index.d.ts",

Export TS Types and Interfaces

I see the changes I need are merged into master #84, thanks @dimorphic 😻

I propose releasing the latest changes.
v2.10.1...master

v2.10.2 🏆
What Changed?
- update lint preference and dependencies. 🧹
- export TS types & interfaces (#84) 📦

show error type in Typescript

Describe the bug
I have this issue with version 4.0.1

Can you show me how to fix it?

Is it possible to keep the tooltip in the DOM in order to reuse it?

I have a pretty massive component under a tooltip, and I want it to stay in the DOM to prevent unneeded re-renders. How is this achievable if at all?

Source in "dist" directory in v2.11.0 using ES2015+ syntax, v2.10.1 does not

Describe the bug
In examining the source files in version 2.11.0 ES2015+ syntax is used. I didn't see this mentioned in the release notes, so I'm assuming this was unintended. This is causing an issue when trying to use this library in IE11, as it doesn't support that syntax. (This library is a dependency of a Storybook library, so the tests of our frontend components fail in IE11 due to this. For the time being, I'm pinning the version to 2.10.1)

For example in dist/cjs/react-popper-tooltip.js the source on lines 9 through 12 is:

const TooltipContext = React.createContext({}); // eslint-disable-next-line @typescript-eslint/no-explicit-any

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args));

In version 2.10.1 those lines are:

var TooltipContext = React.createContext({}); // eslint-disable-next-line @typescript-eslint/no-explicit-any

// eslint-disable-next-line @typescript-eslint/no-explicit-any
var callAll = function callAll() {

To Reproduce
Steps to reproduce the behavior:

1. Do a build and examine the source, ES2015+ syntax is in use.

Expected behavior
No ES2015+ syntax should be found.

Screenshots
n/a

Desktop (please complete the following information):
n/a

Smartphone (please complete the following information):
n/a

Additional context
n/a

Make tooltip more customizable

Thank you for the library!

My suggestion is to remove the default tooltip layout and classes and provide the tooltip customization through render prop instead of classes.

API may look like:

import styled from 'styled-components';

const Tooltip = styled.div`...`;
const Arrow = styled.div`...`;

<TooltipTrigger
  tooltip={({ styles, arrowStyles, arrowPlacement }) => (
    <Tooltip style={styles}>
      <Arrow style={arrowStyles} data-placement={arrowPlacement}  />
      Hello!
    </Tooltip>
  )}
>
  React?
</TooltipTrigger>;

It provides the much more flexible way for tooltip customization.

Thank you!

Feature Request: Expose trigger ref to Tooltip

Is your feature request related to a problem? Please describe.
Currently the tooltip has no access to the element that triggered it. This means it cannot adjust its arrow horizontal position (for example) based on the metrics of the triggering element. By knowing the width of the triggering element, the arrow could always be centred on that element, even if the tooltip is displayed using 'bottom-start' for example.

Describe the solution you'd like
Tootip could be passed a ref to the triggering element. If such direct coupling is not wanted, it could be passed a bounds object.

Describe alternatives you've considered
I don't think there is any alternative given the current limitations.

An in-range update of docz is breaking the build 🚨

The devDependency docz was updated from 0.12.16 to 0.12.17.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

docz is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ Travis CI - Branch: The build failed.

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Style.css doesn't work on IE11

Describe the bug
Since #107 the default css uses css variables. This is not supported in IE11 (which sadly we still have to support.

To Reproduce
Steps to reproduce the behavior:
Open a tooltip on css: there is no background on the popup.

Expected behavior
We would like the popup to have a background

Screenshots

Desktop (please complete the following information):

• OS: windows
• Browser: Internet Explorer
• Version: 11

Additional context
I see two solutions here:

• drop the variables and repeat the colors everywhere
• strip the varibles with postCss or something

followCursor tooltip - reposition if you mouse over tooltip

Describe the bug
In followCursor mode, the tooltip doesn't reposition if you move the mouse over the tooltip

To Reproduce
Steps to reproduce the behavior:

1. Go to the follow cursor demo https://react-popper-tooltip.netlify.com/#follow-cursor
2. Mouse over to see tooltip
3. Quickly move the mouse over the tooltip
4. Tooltip doesn't reposition

Expected behavior
react-popper-tooltip should ensure tooltip doesn't sit underneath cursor when in followCursor mode.

Screenshots

Desktop (please complete the following information):

• OS: Mac OS X
• Browser: Chrome
• Version: 83.0.4086.0

Autofocus input inside tooltip causes scroll jump

Opening a popper-tooltip with an autofocus input inside it, causes the page to jump (scroll). How can this be resolved?

Also, as I have an input inside the tooltip, the tooltip close should be handled only on click outside the tooltip, the scroll of the main page should not cause the tooltip to close, the tooltip in opened on focus and click of the element, so as stated in #85 and #59, handling this using the the controlled component, but the onVisibilityChange method is triggered when the cursor is moved outside the tooltip area or even if it is being scrolled. How can we handle this close of the popper-tooltip only on click outside the tooltip area?

Click events are magically turned into touch events

When the browser supports touch events, the onClick event is automatically turned into a onTouchEnd event:
https://github.com/mohsinulhaq/react-popper-tooltip/blob/master/src/TooltipTrigger.tsx#L208-L215

This is an issue for some laptops with a touch screen that do not trigger onTouchEnd when using a mouse.

Problem with compilation

Using create-react-app I get this error

Failed to minify the code from this file:

        ./node_modules/react-popper-tooltip/dist/TooltipTrigger.js:1:1460

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

An in-range update of @types/react-dom is breaking the build 🚨

The devDependency @types/react-dom was updated from 16.8.0 to 16.8.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/react-dom is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ Travis CI - Branch: The build failed.

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Change tooltip color or theme

I can't change the color of the tooltip. I can override the css with !important but I still have a problem with the arrow styling. For me it's a real problem!

It will be a good idea to add a prop for color of the whole tooltip. Example: color='#000' .

Alternatively, add a prop for a theme color if you want a several pre-styled tooltips. Example: theme='dark' .

Detecting clicks outside of a tooltip – `handleOutsideClick` fires after unmounting (IE only)

I’ve found a very specific scenario in which handleOutsideClick function is fired when the Tooltip component is unmounted.

In my web app (using react, redux and react-redux-router) I have a button which acts as a tooltip trigger (trigger mode is set to “click”) and a button which executes history.push. Due to the routing, navigating through the app using “push” won’t reenter the app but only unmounts some components and mounts another. In IE 11 when the user clicks on the second button when the tooltip is shown react unmounts parent component, buttons and hence the TooltipTrigger and the Tooltip components. The handleOutsideClick event handler is removed, but (only in IE) the code in the handler is executed which leads to exception because findDOMNode cannot be used on unmounted components.

In my opinion, the simplest solution is to check whether the component is mounted before calling findDOMNode. I don't have any idea why the handler is called after removing the event listener.

Focus / Blur Events

Right now the plugin supports click, right-click, hover events.

I don't see any specific callback/methods to enable / turn-on / turn off the tooltip from outside, or the ability to define a trigger="focus" which should support both click+focus.

If you want this to be accessible, having the ability to tab through and it shows automatically is fantastic, and especially with enter/escape functionality.

I'm currently building a tab-through list of dl/dt/dd elements which each of their own definitions. Being able to tab through these and focus on each item w/ it's tooltip would be quite useful.

React 17 support

Please can we have support for React 17 so I don't get this peer dependency warning when installing in my React 17 projects. Thanks!

npm WARN [email protected] requires a peer of react@^16.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^16.6.0 but none is installed. You must install peer dependencies yourself.

[Question/Bug] React-Window scroll causes tooltip to rerender for no reason.

Describe the bug
We are using React-Window for show casing big lists. Within this big list we often use popper-tooltip to allow for extra visualization of information.

React-window is smart enough to not rerender any rows which were already rendered once as long as the information does not change.

However, when scrolling in React-window when using these tooltip component ALL tooltip components are rerendered causing performance issues in this list.

It seems like i'm unable to control this component in any way. I did find out when removing the triggerRef on the tooltip wrapper span the problem does not occur (but we also get no tooltip :)).

const Trigger = (children: React.ReactNode) => ({ **triggerRef**, getTriggerProps }: ChildrenArg) => (
  <span
    key="tooltip-span"
    id="tooltip-span"
    {...getTriggerProps({
      ref: **triggerRef**
    })}
  >
    {children}
  </span>
);

To Reproduce
Use tooltip in a list from react-window. Tried multiple memo possibilities in order for it to not rerender, but the same behavior keeps occurring.

Expected behavior
The tooltip should not rerender when there is no cause for it.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 77.0.3865.120

The modifiers object doesn't seem to be exposed to Popper.JS?

Describe the bug
A clear and concise description of what the bug is.

Expected behavior
I should be able to set:

  <TooltipTrigger
    placement={placement}
    usePortal={false}
    trigger={trigger}
    modifiers={{
      offset: 10
    }}

but modifiers does not get passed through in source.

Tooltip with hover trigger not working on page with scrollbar

Describe the bug
When mouse enters trigger element and page has vertical scrollbar and his position is not at top of page then tooltip is flickering and does not remain visible. Problem is probably with function mouseOutsideRect and comparing mouse and trigger position: (pageY || clientY) < Math.floor(top) || (pageY || clientY) > Math.ceil(bottom).

To Reproduce
Steps to reproduce the behavior:
https://codesandbox.io/s/white-leaf-094it?file=/src/index.js
https://user-images.githubusercontent.com/18634735/108426708-613e2900-723c-11eb-924b-b7b9096d97dc.mov

Expected behavior
Tooltip should remain visible after hover button.

Desktop (please complete the following information):

• OS: macOS
• Browser chrome
• Version 88

Could you continue shipping some sensible default CSS?

Hi there, thanks for this library! I just installed the latest version for a new project, but I was a bit confused that the tooltips weren't styled, and the npm module doesn't ship any CSS I can import. I saw in the release notes that this is a recent change.

Given that it's still up to the user to import CSS themselves (and thus that it doesn't add any cost or bloat the bundle size by default) is there any reason you couldn't consider shipping some sensible default CSS with the npm module as a starting point for users? I feel this is the sort of thing that really makes it easier to get up and running with a library quickly. (I also imagine you have to maintain some default CSS for the demo page and example code anyway, so why not just ship it?)

Alternately, if shipping CSS with the package is objectionable for whatever reason, maybe you could consider including a CSS snippet directly in the readme?

Is it possible to render html content inside the tooltip?

I wonder if it is possible to turn on rendering html content inside the tooltip. For example, I want to add a header and a paragraph. When I do it now, all rendered as string. I wonder if you consider to implement an option to turn on html-rendering. Thanks!

Close tooltip-content when mouse over it

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I like to make the tooltip-content disappear when the target for the tooltip is not hovered any more. If you hover the actual tooltip-content it should close.

Describe the solution you'd like
A clear and concise description of what you want to happen.

An prop closeOnToolTipHover={true} // defaults to false

Or maybe, i did not find it, there already an option for this? :P

Exposing the Popper.js instance

Is your feature request related to a problem? Please describe.
I had a need to call the scheduleUpdate for the underlying Popper.js instance, but was not able to find any way to do that.

Describe the solution you'd like
Will it be possible to expose the original Popper.js instance for the advanced use cases that may not be covered by the native API of the "react-popper-tooltip"?

Describe alternatives you've considered
I tried getting around the problem by experimenting with the native API to no avail.

Additional context
The problem I'm facing is that I need to reposition the tooltip when its target resizes or moves.

interactive + tooltip offset bug

Support multiple triggers

Is your feature request related to a problem? Please describe.
For accessibility it would be nice to be able to show tooltips on hover for mouse users and focus for keyboard users. It doesn't seem like this is currently possible, because only one event type can be passed to the trigger prop.

Describe the solution you'd like
Support passing multiple triggers to trigger. A space-separated string would be fine.

Describe alternatives you've considered
A workaround is to manually assign onFocus and onBlur on our trigger to the onMouseEnter and onMouseLeave respectively.

Tree-shaking doesn't work

I'm building a component library that uses TooltipTrigger (version 2.11.1). Unfortunately, it breaks tree-shaking by probably introducing some side-effects. I'm building with Rollup.

Clicking the trigger should not stop propagation

Clicking the trigger stops event propagation:

https://github.com/mohsinulhaq/react-popper-tooltip/blob/master/src/TooltipTrigger.tsx#L194

I don't understand why this is the default behaviour. It limits the trigger to only do one thing - open the popup - why impose this limit? If user wants to stop propagation it can easily be done by calling getTriggerProps() and overriding onClick.

I was wandering if we can get the choice of whether clicking the trigger will stop propagation. Not having the option creates an issue for us because in our case, clicking the trigger does a few more things apart from opening the popup, and the onClick event gets stopped due to .stopPropagation call.

Don't close on click when trigger hover

Hi,

I want to don't close the tooltip if trigger='hover' and user click on the trigger element.

Try here : https://react-popper-tooltip.netlify.com/#hover-trigger

THX

Div not scrolling when cursor over popper

First off, fantastic library. I had initially tried to make my own tooltip with Popper, using react-popper as a base, then I came across yours, which was way more robust than my implementation (especially with the trigger on mouse click), so I decided to give yours a try.

I'm having this issue where I'm not sure if it's something to do with your library, or an underlying issue with PopperJS itself, or I need to make some other adjustment (perhaps a modifier?) to get the behavior I desire.

I took your Codebox example and modified it so the trigger is within a scrollable div. The issue is, when the popper is open, the div will not scroll if the cursor is over the popper, even though the cursor is still within the boundary of the scrollable div. This is unlike your example where if the cursor is over the popper, it still scrolls.

Again, not sure if it's a bug, a limitation, or something I need to implement to get it so I can still scroll even if the cursor is over the popper.

Links inside tooltip

Reproduction demo

https://codesandbox.io/s/1q9yy1342j

Steps to reproduce the problem

1. Click on the trigger
2. Click on the link

What is the expected behavior?

I think click trigger should allow events inside the tooltip

What went wrong?

The link doesn't follow the URL.
Click on the link triggers _this.handleOutsideClick() and then it calls event.preventDefault().

Any other comments?

Do we have any possibility to avoid this?
Or wouldn't it be a good idea to add outsideClickHandler to props?

Packages versions

• react-popper-tooltip: 2.8.1

Code question: why do you use `?` and `!`?

Asking purely out of interest. while reading your code I was wondering if there was a reason for adding a ? to your private methods?

private handleOutsideClick?

This also causes you to do this later on which would not be needed if you didn't use ?.

this.handleOutsideClick!

Upgrade to latest popper packages

Is your feature request related to a problem? Please describe.
popper.js v1 has been deprecated

Describe the solution you'd like
Upgrading all popper related packages

Describe alternatives you've considered
none

Additional context
storybookjs/storybook#9961 (comment)

Tooltip hide on disabled input doesn't work

If the trigger element is a disabled button, the tooltip isn't hiding on mouse leave.

Demo: https://codesandbox.io/s/61yv95m533

findDOMNode usage is deprecated

This lib uses findDOMNode which has been deprecated in StrictMode. Is there a way to avoid using that helper, because it throws warning in StictMode?

BUG set an array of strings for the trigger prop

Describe the bug
When setting the trigger to an array of strings, the hover effect doesn't work properly anymore. If you hover the trigger and move your mouse inside the tooltip, the tooltip disappears.

To Reproduce
Go to the code sandbox from your documentation and inside Example.js replace the value of trigger with {["hover"]} or any other array of strings. Then try to move the mouse inside the tooltip.

Expected behavior
I would expect this to work the same way as trigger="hover" does.

Desktop (please complete the following information):

• OS: MacOS Mojave
• Browser Chrome
• Version 78.0.3904.108 (Official Build) (64-bit)

Uncaught TypeError: Cannot assign to read only property 'transform' of object '#<Object>'

Describe the bug
I'm using the hover trigger, after hovering over several triggers (or over the same one multiple times) it crashes.

To Reproduce
Here's the snippet of my code:

            <TooltipTrigger
              placement="auto"
              delayShow={500}
              followCursor
              tooltip={({ getTooltipProps, tooltipRef }) => (
                <div
                  {...getTooltipProps({
                    ref: tooltipRef,
                    className: 'tooltip-container'
                  })}
                >
                  {commentTruncated ? <CommentWrapper content={comment?.content} /> : null}
                </div>
              )}
            >
              {({ getTriggerProps, triggerRef }) => (
                <div
                  {...getTriggerProps({
                    ref: triggerRef,
                    className: 'trigger'
                  })}
                >
                  <TruncateContainer>
                    <Truncate lines={lines} onTruncate={setCommentTruncated}>
                      {comment?.content}
                    </Truncate>
                  </TruncateContainer>
                </div>
              )}
            </TooltipTrigger>

Additional context

Uncaught TypeError: Cannot assign to read only property 'transform' of object '#<Object>'
    at react-popper-tooltip.js:414
    at InnerPopper.render (Popper.js:166)
    at finishClassComponent (react-dom.development.js:18407)
    at updateClassComponent (react-dom.development.js:18360)
    at beginWork$1 (react-dom.development.js:20108)
    at HTMLUnknownElement.callCallback (react-dom.development.js:362)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:411)
    at invokeGuardedCallback (react-dom.development.js:466)
    at beginWork$$1 (react-dom.development.js:25730)
    at performUnitOfWork (react-dom.development.js:24638)

Detecting clicks outside of a tooltip - touch devices (iOS only?)

This issue is related with detecting clicks outside of a opened tooltip which has its "trigger" property set to "click".
Currently this feature doesn't work on Safari Mobile/web view in iOS app.
In my opinion the code should detects events such as "touchstart" (or maybe "touchend") and "auxclick".
I'm not sure if attaching additional listener should be done in this code

_addOutsideClickHandler = () => {
    document.addEventListener('click', this._handleOutsideClick);
    document.addEventListener('touchstart', this._handleOutsideClick);
}

or added as a new function.