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
0
votes
0 answers

Display correct tooltip in react-table column

I am trying to display tool tip using react-tooltip component in a tags column when tags are more than 2 I am able to display tool tip but it's always giving me a last tag. although I want row basis tool tip . Seeking a help in correcting a…
divein
  • 57
  • 1
  • 11
0
votes
1 answer

react-tooltip styling is off

For some reason my react-tooltip tooltips are not the same as everybody else's. I'm guessing some of my css is probably interfering with the tooltips but I can't figure out what it is. this is what it looks like: As you can see the 'arrow' part of…
Max Taylor
  • 343
  • 3
  • 16
0
votes
1 answer

Unable to style custom class of react-tooltip

I am using react-tooltip with an information icon. I have added a custom class to my tooltip element. But I am unable to style it in CSS, even though I am using !important. I went through How to align the text to the left. in react-tooltip? but that…
Sh4dy
  • 143
  • 2
  • 15
0
votes
2 answers

React Tooltip doesn't close on mouse leave

I have created this map with react-simple-maps and react-tooltip. I forked from a project but my ideal scenario here is On click of the state, the tooltip shows up, but on mouse leave, the tooltip won't disappear. Instead, it stays there, and if.…
Ken Ryan
  • 539
  • 1
  • 10
  • 31
0
votes
2 answers

React-tooltip displays twice when using MUI icon

Whenever I add a tooltip to an SVG (using react-toolip), the tooltip shows twice: The Code:
0
votes
1 answer

How to get data into my tooltip from a map?

I am using react tooltip, but I'm not sure how to get the data in my tooltip. I would like the topline and bottomline consts to go in the tooltip. Can anybody point me in the right direction? export const SmallCalendar = ({ events }) => { const…
BennKingy
  • 1,265
  • 1
  • 18
  • 43
0
votes
0 answers

Adding className or class prop does not result in adding its value to the class property of react tooltip div

I am trying to use react-tooltip library to add tooltips functionality to my application. The problem I have encountered is that passing className or class prop does not result in class property added to the corresponding div element. After quite…
altern
  • 5,829
  • 5
  • 44
  • 72
0
votes
1 answer

ReactTooltip.show does not work in Functional Components

I want to show the tooltip based on some logic, which means I'll execute ReactTooltip.show to show the Tooltip manually. As of now, the example in the docs mention passing the reference of the target to the function, which is not working in my…
Abhishek Jain
  • 630
  • 6
  • 26
0
votes
1 answer

These errors are preventing my nodejs app from loading

I am getting these errors while rendering the page. My project is based on NodeJs + React. I'm using these version. react version : ^16.5 react-dome : ^16.5 @material-ui/core : ^4.9.1 @material-ui/icons : ^4.9.1" First error: Tooltip.js:479 Uncaught…
VijayT
  • 17
  • 1
  • 4
0
votes
1 answer

react-tooltip, tooltip moves to next component, giving the component two tooltips

I have multiple Icons, each with a unique tooltip advice. These Icons change over time, and so the resulting tooltip needs to be updated. However, when the Icon changes, it is almost as if the tooltip cannot find the icon, and so latches on to the…
wuiiz93
  • 119
  • 1
  • 10
0
votes
1 answer

is there a way to show react-tooltip with event's content when click

I am using Fullcalendar with react-tooltip component. It works properly when hover but I want the tooltip to be opened when click the event. As shown in react-tooltip documentation I can add buttons and show(hide) the tooltip when clicking buttons,…
Takhtak Team
  • 131
  • 1
  • 2
  • 10
0
votes
1 answer

React Tooltip - as we scroll to page, tool tip position gets same , it wont come along with text link

React Tooltip issue React Tooltip is perfectly showing tooltip at bottom position applied. But as we scroll little bit webpage , and hover on same link again. tooltip goes beyond visible area, it dose not move with text that we are hovering.. div…
Monika Kumbhar
  • 45
  • 2
  • 12
-1
votes
1 answer

React Tooltip doesn't show on hover

Component - Tooltip Code -
Adri
  • 127
  • 4
  • 10
1 2
3