slmgc / react-hint Goto Github PK

How to prevent the tooltip from closing when click outside, in other words, manually toggle it?

Hi,

Is it possible to show multiple lines in a popup for a very basic case?

<ReactHint autoPosition events />
<button data-rh="tooltip 1">Hover me 1 !</button>

I tried using "\n" symbol but it didn't work.

Currently it is not possible AFAIK to add a CSS animation which triggers once the element that toggle react-hint is hovered out.

We can use delay={{ hide: someDelay }} props but then the react-hint is removed from DOM after specified delay when state.target is emptied, thus no animation can be shown.

An option to allow fadeOut on leave would be to add a class once triggering element is hovered out (ex. .react-hint--hide) and use this class to set a fadeout animation similar to the CSS animation fadeIn. This fadeOut could complete as long as the animation-delay (0.5s by default on the fadeIn anim) is smaller than the hide delay set in delay props.

Thank you for this library - it works very well in Chrome and Firefox.

I have run into two problems when testing it in IE 11 though. Does react-hint support IE?

The most noticeable issue is that, in IE, the tooltips do not appear in the demo (https://react-hint.js.org/).

The other issue I am having in IE is that hovering over a select that has a tooltip causes a React "Maximum update depth exceeded". There is no issue in other browsers. I can try to provide a small example reproducing the error if you want.

I'm having great trouble using react-hint across multiple, individual components in my app.

If react-hint is included multiple times, I end up with multiple tooltips appears on every hover. I think it's because I'm setting up each instance using:

const ReactHint = ReactHintFactory(React)

and so ReactHint is using the same root but I don't understand how I can set up a new instance specific to the component in which it's embedded, if that makes sense?!

https://gist.github.com/howells/f7de166446d75537a0a50ab9de205ba4

this component, UserActions, can appear many many times within an component, so I need the hints to be scoped to just that instance of the component.

Any help much appreciated!

Could you add a feature whereby the tooltip would start as visible on page load? I have a situation where I need to call attention to a new page element, and dismiss the tooltip on a click anywhere on the page (which you've already implemented).

My tooltip content is rendering at the position of the ReactHint instead of floating above the element with the data-rh. I am including <ReactHint autoPosition events /> in my component, not at the <App /> level. Could this cause problems?

Example:

class ComponentWithTooltip extends Component<Props> {
  render() {
    return (
      <div >
         <ReactHint autoPosition events />
         <button data-rh="tooltip 1">Hover me 1 !</button>
         <button data-rh="tooltip 2">Hover me 2 !</button>
      </div>
    )
  }
}

Currently we use [email protected]. We have <ReactHint /> in top container component to avoid conflicts with multiple instances in v1. Half of our components use data-rh-cls. Is there a strategy how to migrate to v3 when only half of components uses data-rh-cls?

Is this possible to get back data-rh-cls back, which was deprecated in 2.0.0?

Thank you for your library!

The compilation fails when building for production (npm run build) due to Webpack Uglify plugin.

Step to reproduce:

1. create-react-app example
2. cd example 
3. npm run build  --> works
4. npm inistall -S react-hint
5. Add some react-hint code to the file App.js (as shown in the react-hint example)
6. npm start --> works
7. npm build --> will give you an error 'Failed to minify the code..'

The error seems due to the way "react-hint" is exported (http://bit.ly/2tRViJ9)
Temporary workaround: Copied and referenced the ReactHintFactory in my project directly and it worked.

Thank you for your library!

What are breaking (and non-breaking) changes in v2? I can't find changelog anywhere. Would you mind add it, please?

The working demo looks promising, but I gave up almost instantly trying to implement this library for the following reasons:

1. No explanation given at all for why there are two declarations of given one after the other. Why -- I ask myself -- don't you just move props autoPosition events delay={100} from first to second (and get rid of first)? I'm sure there's a reason that's clear to the architect, but it's not intuitive or explained.

    <ReactHint autoPosition events delay={100} />
			<ReactHint persist
				attribute="data-custom"
				className="custom-hint"
				events={{click: true}}
				onRenderContent={this.onRenderContent}
				ref={(ref) => this.instance = ref} />

2. What is this.instance? There is no such property given in the component

Hi! Thanks for react-hint, I am using it and having a good time :) I wanted to adopt it on a bigger project of mine, but but website https://react-hint.js.org is at the moment broken, and I cannot demo the tooltip to the rest of the team.

The error is

Uncaught ReferenceError: ReactHintFactory is not defined
        at react-hint.js.org/:335

Thanks,

Would be great to see a demo on gh-pages or equivalent

When I have a data-rh attribute on a <span> inside a <tr> element, the tooltip element is still created as a <div>, causing the warning:

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>.

Is it possible for the tooltip element to be configured to be a span instead of div?

I am trying to use this in a Preact app, but can't get it to work.

TypeError: createRef is not a function

I have compat aliases set up in snowpack config:

alias: {
    react: 'preact/compat',
    'react-dom': 'preact/compat',
  }

and typescript paths in tsconfig.json:

"paths": {
      "react": ["node_modules/preact/compat/"],
      "react-dom": ["node_modules/preact/compat/"]
    }

I created the factory as recommended in the docs, but still get the above mentioned error.

Has anyone else successfully used react-hint with the latest version of preact? (v10.5.14 at time of writing).

Any ideas what I could do?

Many thanks,
Brian

While I could develop this by forking, I thought it would be helpful for the community to add support for child elements where the tooltip could accept HTML components.

My use cases are specific to what I need, but, I think it would be helpful to support HTML within the tooltip itself.

Specially, when you would like to display certain elements with CSS styles, or, when presenting limited tabular data using HTML elements could be supported.

react-hint is having the same issue as with react-tooltip and with popper.js (see solution concept there) in that it doesn't work with transformed containers (specifically scale).

Just try adding transform: translateX(-149px) scale(0.8); to your demo container, then you'll see the tooltips are no longer aligned properly.

It'd be awesome if this was supported!

I'm looking for a lib that can handle transforms. I might just have to roll my own if I can't find one.

When using a react-hint which can be triggered by multiple elements (more than one element with data-rh attribute) and using a hide delay (delay={ hide: someDelay }), the fadeIn animation is only triggered when the first react-hint is shown (hover on one of the elements which toggles it). But if hovering onto another element before delay expires the animation does not kick in, indeed the react-hint DOM node is not removed and re-added but its position is changed (I suppose), so the animation is not triggered.

An option to avoid that would be to add a class to the react-hint when a triggering element is hovered (ex. react-hint--show) and set the CSS animation fadeIn there. Let me know if your're ok with this option so I can work on a PR.

When tooltip shows to top, it do not check, that it's content visible on screen:

Nifty library. ✨

One thing I'm looking to do is have the hint itself be aware of its surroundings. In other words, if I have a button that opens a tooltip, and, say, that button is flush with the bottom of the page, I'd like to open the tooltip open to the top. Right now it just drops the tooltip to the bottom (if you request bottom) where you have to scroll to see it. Same idea on all the other sides, too.

Mostly asking about this because I'd really just like to toss a tooltip in with no regard to where it might be on a page. Or, put another way, I just want to open the tooltip towards whichever direction has the most space on-screen (so something riding the right hand of the screen would open to the left, etc.)

Thoughts on this? (Or, is it doable today? I've taken a peek but couldn't see anything related to this.)

Is this possible? Looking at the code I only see a single timer for this, is there any hook I can use to customize this?
I want to have long show delay but a short hide to avoid spamming the UI with tooltip popups as user moves the mouse around. Tooltips should only show up if user is confused what given control does and pauses for a second, but once tooltip is visible and user moves the cursor away I don't want to keep that old popup visible for another second, it should hide instantly when not needed.
Thanks!

Hello,

I think could easy make this library ARIA compliant

As referenced:

• http://accessibility.athena-ict.com/aria/examples/tooltip.shtml
• http://pauljadam.com/demos/aria-role-tooltip.html

Say that I have a div with data-rh={this.state.hintText}, on hover it shows.
Let's say I have an onClick on that element and when clicked I change state.hintText to something else - the element re-renders but the hint stays the same.

Only after mouseout/in does it renders correctly.

Could not find a workaround with available methods.

<span>

<ReactHint
delay={100}
attribute="label"
className={cp-tooltip-${mode}}
events={{hover: true}}
/>

<Icon.Information label="Left" label-at="left" />
<button label="Top" label-at="top">Top</button>

</span>

I would like to be able use a component (Icon.Information) in place of a single element (button).

The button renders and has the correct tooltip.
The component renders but has no tooltip.

Could you please advise be how this might be possible? Thanks

Hi! It would be incredibly helpful if the ability to add more than one custom classname was introduced (perhaps a wrapper class for the outer div).

I am trying to create a tooltip with two different colour settings. I can't find a way for me to do this at the moment. I can have all the styles exactly the way I need, but I can only have one colour version of the tooltip whereas I need two.

Please can you let me know if a small tweak in the code could make this possible? Thanks!

Nice library! I've just stumbled upon it today and played with it a bit.

I've tried using react-hint to add tooltips to SVG elements and it doesn't work. I'm guessing it's because it tries to inject 'plain' DOM elements (div, span) as the wrappers for the tooltip and that doesn't play well with SVG.

I've used redux-tooltip successfully with SVG. That library allows the user to specify a custom wrapper, for example if I put g as my preferred tag everything works nicely. Not sure how easy a change this is to make or there is any other SVG specific logic involved besides just switching tags.

I'm following the docs and can't seem to get this working. Here's my index.tsx:

import * as React from 'react'
import { render } from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './components/App'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'unstated'
import ReactHintFactory from 'react-hint'
import 'react-hint/css/index.css'

const rootEl = document.getElementById('root')
const ReactHint = ReactHintFactory(React)

render(
  <AppContainer>
    <Provider>
      <BrowserRouter>
        <App>
          <ReactHint />
        </App>
      </BrowserRouter>
    </Provider>
  </AppContainer>,
  rootEl
)

// Hot Module Replacement API
declare let module: { hot: any }

if (module.hot) {
  module.hot.accept('./components/App', () => {
    const NewApp = require('./components/App').default

    render(
      <AppContainer>
        <Provider>
          <BrowserRouter>
            <NewApp>
              <ReactHint />
            </NewApp>
          </BrowserRouter>
        </Provider>
      </AppContainer>,
      rootEl
    )
  })
}

The following line:

const ReactHint = ReactHintFactory(React)

Generates this in my console:

Uncaught TypeError: react_hint_1.default is not a function

package.json devDependencies:

  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "@types/jest": "^23.3.10",
    "@types/lodash": "^4.14.119",
    "@types/node": "^10.12.10",
    "@types/react": "^16.7.8",
    "@types/react-dnd": "^3.0.2",
    "@types/react-dnd-html5-backend": "^3.0.2",
    "@types/react-dom": "^16.0.11",
    "@types/react-router-dom": "^4.3.1",
    "awesome-typescript-loader": "^5.2.1",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "dotenv-webpack": "^1.5.7",
    "express": "^4.16.4",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^4.5.0",
    "ip": "^1.1.5",
    "jest": "^23.6.0",
    "json-rules-engine": "^2.3.2",
    "lodash": "^4.17.11",
    "node-sass": "^4.10.0",
    "react": "^16.6.3",
    "react-addons-test-utils": "^15.6.2",
    "react-dnd": "^7.0.2",
    "react-dnd-html5-backend": "^7.0.2",
    "react-dom": "^16.6.3",
    "react-dropdown": "^1.6.3",
    "react-hint": "^3.2.0",
    "react-hot-loader": "^4.3.12",
    "react-router-dom": "^4.3.1",
    "react-select": "^2.2.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "tslint": "^5.11.0",
    "typescript": "^3.1.6",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "unstated": "^2.1.1",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.4"
  }

Am I missing something? Is there a bug?

It would be great if it was possible to position the hint both vertically and horizontally, like position="topLeft" or horizontalPosition="left" verticalPosition="top" or similar.

We extended the switch statement in getHintData to handle our particular use case, but this approach may not be practical as a general solution.

      case 'topLeft':
        top = 0;
        left = -hintWidth;
        break;

What would be your suggestion?

i'd like to use it for my project but my project uses typescript. can it work in typescript?

Heyo,

My preact application uses a shadow dom as a mounting point, and tooltips are not appearing. I did some digging through the source code, and I believe I know why.

// ReactHint#toggleEvents, line 30
;(click || hasEvents) && document[action]('click', this.toggleHint)
;(focus || hasEvents) && document[action]('focusin', this.toggleHint)
;(hover || hasEvents) && document[action]('mouseover', this.toggleHint)
;(click || hover || hasEvents) && document[action]('touchend', this.toggleHint)

Events in the shadow dom are not propagated up to document, so toggleHint never fires.

One way that this could be fixed is by allowing users to specify the element where the ReactHint singleton should listen for events

using SVG react hint not working in IE11,Except IE for all browser working well.kindly help to resolve this.

CodeSandbox here

import ReactHintFactory from "react-hint";
const ReactHint = ReactHintFactory(React);

export default function App() {
  return (
    <div>
      <ReactHint events />
      <div
        style={{
          minHeight: "100vh"
        }}
      >
        <div
          style={{
            padding: "1rem",
            backgroundColor: "hsl(0, 0%, 92%)",
            display: "flex",
            justifyContent: "flex-end"
          }}
        >
          <button data-rh="Add top-level category">OK</button>
        </div>
      </div>
    </div>
  );
}

Everything in this example besides the backgroundColor is necessary to reproduce the bug.

Error message when hovering over the button:

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (react-dom.development.js:23803)
    at scheduleUpdateOnFiber (react-dom.development.js:21835)
    at Object.enqueueSetState (react-dom.development.js:12467)
    at ReactHint.Component.setState (react.development.js:365)
    at ReactHint.eval [as getHintData] (index.js:213)
    at ReactHint.componentDidUpdate (index.js:232)
    at commitLifeCycles (react-dom.development.js:20684)
    at commitLayoutEffects (react-dom.development.js:23426)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23151)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at commitRoot (react-dom.development.js:22990)
    at performSyncWorkOnRoot (react-dom.development.js:22329)
    at eval (react-dom.development.js:11327)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at scheduleUpdateOnFiber (react-dom.development.js:21893)
    at Object.enqueueSetState (react-dom.development.js:12467)
    at ReactHint.Component.setState (react.development.js:365)
    at ReactHint.eval [as getHintData] (index.js:213)
    at eval (index.js:77)


The above error occurred in the <ReactHint> component:

    at ReactHint (https://1z08p.csb.app/node_modules/react-hint/lib/index.js:30:31)
    at div
    at App

I will look into fixing it myself but help would definitely be appreciated!

can anyone please help me with this, Thanks ..!!

in Title cell components
before I implement my code, it's working fine with this code

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Breadcrumb from '../../../components/Breadcrumb';

const StyledTitle = styled.divcolor: #091219; font-size: 1.125rem; font-weight: Bold; width: max-content; max-width: 250px; white-space: pre-line;;
const TypeRow = styled.divdisplay: flex; justify-content: space-between;;
const TypeHeader = styled.h4margin-bottom: 0px;;

const TitleCell = ({ type, title, versionId }) => (


{type}


{title}

);

TitleCell.propTypes = {
type: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
versionId: PropTypes.string.isRequired,
};

export default TitleCell;

but I need to add tag and add href into this so changed this code to

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useStore } from 'react-redux';
import { useQuery } from '@apollo/client';
import { Button } from '@twigeducation/ts-fe-components';
import Breadcrumb from '../../../components/Breadcrumb';
import { breadcrumbsQuery } from '../../../components/Breadcrumb/Breadcrumbs.query';

const StyledTitle = styled.divcolor: #091219; font-size: 1.125rem; font-weight: Bold; width: max-content; max-width: 250px; white-space: pre-line;;
const TypeRow = styled.divdisplay: flex; justify-content: space-between;;
const TypeHeader = styled.h4margin-bottom: 0px;;

const BreadcrumbLink = styled.atext-decoration: inherit; color: inherit; cursor: pointer; &:visited{ text-decoration: inherit; color: inherit; cursor: pointer; } &:hover{ text-decoration: inherit; color: inherit; cursor: pointer; };

const TitleCell = ({ type, title, versionId }) => {
const { subscriptions } = useStore().getState();
const { loading, data, error } = useQuery(breadcrumbsQuery, {
variables: {
applicationId: subscriptions?.product?.tocsApp,
versionId,
},
});

if (loading) {
    return <div data-at="loading" />;
}

if (error || !data.studentSession) {
    return null;
}
return (
    <table>
        <tbody>
            <td>
                <BreadcrumbLink
                    href={`/student-session/${data.studentSession.attributes.slug}/${btoa(
                        versionId,
                    )}`}
                >
                    <TypeRow>
                        <TypeHeader data-at="title-type-cell">{type}</TypeHeader>
                        <Breadcrumb from="titlecell" versionId={versionId} />
                    </TypeRow>
                    <StyledTitle data-at="title-header-cell">{title}</StyledTitle>
                </BreadcrumbLink>
            </td>
        </tbody>
    </table>

);

};

TitleCell.propTypes = {
type: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
versionId: PropTypes.string.isRequired,
};

export default TitleCell;

and it gave me errors on both sides ln browser console or in react test part. i just need to add a tag in top.

Tooltip will not show on a disabled button. Is this possible to fix? I'd be happy to take a stab at it if you think it is doable. I tried wrapping the button in a span with the data-rh attribute, but that didn't work.

As I am slooooooowly working on the next API, I guess it makes sense to gather all the feedback and ideas, and feature requests before it gets cut in stone. I am going to write down some of my thoughts about the new API and show what I have in mind.

Folks, if you have major pain points with the current API, I would like to know about them and discuss what could be improved.

Hey I just found a little problem on mobile device that the hint will be triggered when I hold my finger on the target and then scroll the screen even I set the events to "click".

I think it is not the expected behavior as holding and scrolling should not trigger click on mobile device. I guess the reason is because in the last line of toggleEvent function you register a handler for "touchend" even for click?

ToggleEvent function

Like if I want to change the background color of tooltip, what should I do?

click/hover, you name it. Does nothing on your demos.

A duration parameter would be nice, to configure how long the tooltips stay visible. Based on the documentation I don't believe there is - correct me if I'm wrong!

Hi
Just found this library. Please, update the example on your site https://react-hint.js.org/
It seems that it the example uses an outdated version of this library

Hello, I am trying to get started with your library. However, the following code is giving me an error.

Tooltip.js

import React from 'react';
import ReactHintFactory from 'react';
const ReactHint = ReactHintFactory(React);

const events = {
    click: true,
    focus: false,
    hover: false
};

const Tooltip = (props) => {
    return <ReactHint position="right" attribute="data-tooltip" events={events} {...props} />
};

export default Tooltip;

gives following error:

TypeError: (0 , _react2.default) is not a function
./src/components/Tooltip.js

Hi Vladimir,

Thanks very much for the component. It works well and is much simpler to style than most tooltip options out there.

We are having some trouble on mobile / touch devices in our app. Tooltips open fine, but we have no way to close them. Tapping on another link opens that tooltip and closes the previously open one, but we are not able to toggle the visibility of one tooltip by tapping again, or tapping somewhere else on the screen.

The example page also has this issue.

We were going to look into using the onClick on the trigger to somehow check if it is a repeat click and set the target back to null. But we thought it would be best to check with you first to see if there is a way you would handle this.

Thanks again, and we hope to hear from you soon.

Laurie

Hey, I am wondering if it's possible to ensure the tooltip is accessible. Perhaps using one of the examples listed here? Have you ever considered the use of ARIA tags for the tooltip? Thanks

hello, can you tell me if it's possible to get hovered element ?
i want to replace some data in custom tooltip from 'target' data attributes

Not completely sure what is happening here, seems since the lib can't properly position the tooltip, it tries to reposition it infinitely.

Sample: https://codesandbox.io/s/awesome-ellis-yyjyf

Steps To Reproduce

• Open Chrome;
• Toggle device toolbar;
• Select Galaxy S5 as device (Tested on these specs https://i.imgur.com/l92uDY5.png);
• Click on "Hover me" element.

Result

App crashes, React throws an exception of setState depth reached.

It would be great if we could provide global settings/defaults to ReactHint through the component, for example:

<ReactHint displayDelay=100 hideDelay=300 transition="slide" />

Also, supporting those settings would be great as well ;)

If only the "click" event is set to true, it seems as though clicking an element with data-rh works to open the hint but clicking it again does not close the hint.

I can wire up toggleHint from the ref, but it seems like the default here should be to close hint if the element is clicked again. If persist is set to true then it shouldn't close on click. At least that's how I interpret it.

Is there a way to render a component as the tooltip's content?

For example:

<ReactHint
	persist
	attribute="data-tooltip"
	events={{click: true}}
	onRenderContent={(target) => (<div><p>`tooltip ${target.content}`</p></div>)}
/>

const TooltipContentComponent = (props) => <p>content {props.prop1}</p>;

      <button data-tooltip data-tooltip-content={TooltipContentComponent}>
        Default
      </button>