Stack Overflow
Stack Overflow

Questions tagged [react-tooltip]

npm package for custom [tag:tooltip] component in [tag:reactjs]

react-tooltip

A custom <ReactTooltip /> component for handling s in .

Can be modified with custom properties.

  1. Installation 
    yarn add react-tooltip
/* or */
npm install react-tooltip
  2. Usage 
    import ReactTooltip from 'react-tooltip'
// ... code 
return (
  <div>
    <p datatip="Hello world!" />
    <ReactTooltip />
  </div>
)

Official documentation can be found here

enter image description here

43 questions
11
votes
2 answers

React-tooltip doesn't show on conditional render

react-tooltip is awesome, but I'm running into issues with a conditionally rendered component. I have a refresh icon that only shows when props.refreshImages is true: Topbar.js import React from 'react' export default function Topbar (props) { …
Adelbert Ames
  • 364
  • 1
  • 3
  • 8
7
votes
3 answers

React-tooltip doesn't close when mouse leave

I have used react-tooltip on a login page and set the tooltip to trigger on mouseclick. But I want to tooltip getting off when the mouse leaves the element. I couldn't find a way to do it. I want this above showed tooltip remove when the mouse…
Adithya De Silva
  • 91
  • 1
  • 4
3
votes
1 answer

ReactTooltip has wrong position after scrolling

I use the ReactTooltip Component from 'react-tooltip' package. In my application, I have a scrollable modal in which the tooltips are used on some text. When I scroll in the modal, the tooltips get an offset in y direction and I dont know why. Could…
tbastue
  • 73
  • 5
3
votes
2 answers

React-Tooltip not displaying until page is refreshed

Bit of a weird one here. My website is virtually done, there is just one issue. I've implemented tooltips, but they only display once I refresh the page! Here is a GIF reproducing the issue: https://i.imgur.com/NbHyN77.mp4 The package is from NPM,…
Frank Edwards
  • 76
  • 1
  • 9
3
votes
2 answers

Is there any props to change text style(i.e. bold to unbold) in React tooltip?

Can anyone please explain to me how can we make bold text to unbold in react-tooltip. I have used npm react-tooltip note: default text is bold I want normal text.
Anuj Shakya
  • 73
  • 1
  • 9
3
votes
0 answers

Tooltip positioning inside modal components

I have a bug on site, where I have a tooltip, which is mispositioned in modal windows because of the scroll value caused by overflow-y Basically, I need to send the current amount of scroll there is in overflow-y modal component, because of the…
Samuel Hulla
  • 6,617
  • 7
  • 36
  • 70
2
votes
1 answer

Make react-tooltip always visible

I have following code: // App.js useEffect(() => { ReactTooltip.rebuild() }, []) // index.html
altern
  • 5,829
  • 5
  • 44
  • 72
2
votes
1 answer

Definitive guide for styling react-tooltip components?

I am using react-tooltip, react-emotion. I cannot figure out how to style the span in order to override default styles. Here's what I've got so far: import React, { PureComponent } from 'react'; import styled from 'react-emotion'; const…
Johnny Mayer
  • 21
  • 1
  • 4
1
vote
1 answer

why react tooltip test case fails?

Checkout the codesandbox Hover on the icon and inspect element, you'll see a div with an id of doc_entry, but this fails when I write test for it. it('render tooltip content', async () => { const {container} = render() const…
Chandler Bing
  • 410
  • 5
  • 25
1
vote
1 answer

ReactTooltip is not rendering properly

Attempting to use ReactTooltips however the same tip is rendering twice rather than two different tips. The following tips renders twice;
Beau Chaseling
  • 93
  • 1
  • 6
1
vote
1 answer

React tooltip, dont show beside the element

It works fine with other buttons and elements I use on the page, but with the aside section that is on a fixed position. The tooltip shows up on the bottom. The next tooltip, for eksample for GitHub, shows up even further down. I think it has…
Stig Ark
  • 13
  • 6
1
vote
1 answer

Is there any way to increase the size of the arrow in React Tooltip?

I have gone through the official documentation, and haven't found how to increase the react tooltip arrow size. HTML

`} data-for={data._id}…
Joshua Niteesh
  • 11
  • 2
1
vote
1 answer

CSS Not workling in react tooltip

I am using react-tooltip, but I am unable to use some css on html tool tip. Here, is my code: export default function App() { useEffect(() => { ReactTooltip.rebuild(); }); return (
…
Aayush Dahal
  • 856
  • 1
  • 17
  • 51
1
vote
1 answer

How to give border to this react tooltip and remove the arrow?

How can we remove arrow of this react tooltip and give it a border? https://www.npmjs.com/package/react-tooltip
Sreehari Avikkal
  • 305
  • 2
  • 15
1
vote
3 answers

ReactTooltip.hide doesn't hide tooltip instantly

I'm trying to create a tooltip using react-tooltip with a close button. According to the documentation, I need to use ReactTooltip.hide but it doesn't seem to work. It hides the tooltip only if I'm moving the cursor out of the tooltip, but not…
Erez Carmel
  • 39
  • 1
  • 7
1
2 3