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
1
vote
1 answer

Is there a way to access the link inside react-tooltip on hover?

Im using react-simple-maps with react-tooltip Looks like the hover works fine, but I try to click on a link I've added on the tooltip but before I can get to the tooltip, it disappears and I can't access the content with my mouse. is this possible?
Ken Ryan
  • 539
  • 1
  • 10
  • 31
1
vote
0 answers

While using useMediaQuery hook, getting error: Rendered more hooks than during previous render

I am trying to hide a tooltip on mobile devices. For this, I am using useMediaQuery to detect the width like this: const isMobile = useMediaQuery({ query: '(max-width: 767px)' }) Then I am passing isMobile to a ReactTooltip component as the prop…
Shehzadi khushi
  • 275
  • 1
  • 4
  • 20
1
vote
0 answers

Tooltip for each option of dropdown

I want to show the tooltip for each option of using react-tooltip, I have tried below code which is working fine to show tooltip on mouseover, but on keydown and keyup arrow it not works because the focus never come to inner child div, which I have…
MANISH BAGWARI
  • 11
  • 2
1
vote
1 answer

How to align the text to the left. in react-tooltip?

I am using the react-tooltip to show the multiline tooltip, but the problem is that the text is centered by default, how do I align the text to left
rahul Kushwaha
  • 2,395
  • 7
  • 32
  • 64
1
vote
1 answer

Add another row value in Tooltip

I have ReactTable which uses ReactTooltip and shows tooltip for that row value in tooltip. but I want to show another row's value in that tooltip. How I can do that? My code is: import * as React from 'react' import ReactTooltip from…
Damini Suthar
  • 1,470
  • 2
  • 14
  • 43
1
vote
0 answers

How to call ReactTooltip.hide() on Hover in react-tooltip?

I am using react-tooltip to show Tooltip on Table, I want the tooltip only for the text that has Ellipsis. This is what I have done const labelRef = useRef(null); const classes = useStyles(); let tooltipText = tooltipContent ||…
Kunal Tyagi
  • 2,341
  • 1
  • 15
  • 26
1
vote
0 answers

How to change react tool tip data-tip value in a react table column?

{ Header: 'KBMA KPIs', accessor: 'metricDescription', Cell: (row) => { console.log(row) return {row.value}; } } For…
Chanaka Amarasinghe
  • 3,489
  • 11
  • 26
  • 38
0
votes
0 answers

ReactTooltip - react-tooltip anchor is not showing up

ReactTooltip anchor is not showing up when I'm hovering on the element. The tooltip is visible but the anchor is not getting displayed. I'm using a previous version of ReactTooltip - 4.2.21 import "./ProgressChartTooltip.scss"; import ReactTooltip…
Ashmita Singh
  • 69
  • 2
  • 2
  • 11
0
votes
0 answers

Using "react-tooltip" librairy on Nextjs app PROD provoke error

I don't understand where it is coming from because running the app on local works well but on prod (with Next), I see this error : Uncaught (in promise) ReferenceError: e2 is not defined enter image description here Have you seen this error ?
Fabien
  • 11
  • 2
0
votes
2 answers

How can I add a border to arrow in react-tooltip v5?

How can I add a border to arrow in react-tooltip v5? When I specify a border using classNameArrow, it does not work as this. I want to display the border like this. I would also like to consider when the Tooltip place is also other than top. Here is…
Yusa
  • 3
  • 2
0
votes
0 answers

Only some html tags are rendering in ReactToolTip. What am I missing here?

title

content

  • one
  • …
AmeeraJ
  • 71
  • 1
  • 5
0
votes
1 answer

Kendo UI progress bar inside react-tooltip not working

I have a simple div which uses react-tooltip Inside the tooltip I am trying to render kendo progress bar but it doesn't seem to be working, the bar is shown but the progress is not shown import * as React from 'react'; import * as ReactDOM from…
Vandana
  • 23
  • 5
0
votes
0 answers

Position of the React-tooltip coming at the bottom of the map- React tooltip/ JS

I'm trying to display the country name on hover using simple-map react with react tooltip. I'm able to see the text somewhere at the bottom of the map and not at the position where I hover. my app.js import {Tooltip as ReactTooltip } from…
user1234
  • 3,000
  • 4
  • 50
  • 102
0
votes
0 answers

react-tooltip global tool tip, links and other elements with data-tip attributes are inside the child component

I've tried implementing a global react-tooltip. I was assuming that any jsx element with data-tip and using the global react-tooltip id in data-for will magically work anywhere, regardless if it's inside a child component. Maybe my implementation is…
Wreeecks
  • 2,186
  • 1
  • 33
  • 53
1
2
3