Tooltip approach

UI Components for React
Post Reply
sphox
Posts: 4
Joined: 01 Sep 2022, 11:24

01 Sep 2022, 11:28

Morning all,

I feel confused by the current implementation of a tooltip.

Using a component which implements the <Tooltip> component on a DIV element, I have to generate an unique ID for every instances of my component to be sure that the tooltip is attached to the right HTML element.

Why the element which has to display the tooltip is not wrapped into the Tooltip component?

Code: Select all

<Tooltip content={renderCustomTooltipContent}><div>I want this tooltip on this div without using an unique ID (which is far away from the React logic imho)</div></Tooltip>
I feel this approach so much better than the current one.

What do you think?

Thanks for reading.

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

03 Sep 2022, 14:04

No you are using it wrong. Just create 1 tooltip and it will find all your DIV elements that match and display their data-pr-tooltip like this...

Code: Select all


<Tooltip target=".myDiv"  />

<div className="myDiv" data-pr-tooltip="My Div 1" data-pr-position="left"/>
<div className="myDiv" data-pr-tooltip="My Div 2" data-pr-position="right" />

PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

sphox
Posts: 4
Joined: 01 Sep 2022, 11:24

06 Sep 2022, 07:55

Using your approach

How to use a tooltip in a reusable component which includes one tooltip without classNames collisions? (I mean, by reusable component, a component that you can use "as is" without having to declare a specific Tooltip in his parent container)

Using your example in a reusable component

Code: Select all


MyReusableComponent
<Tooltip target=".myDiv"  />

<div className="myDiv" data-pr-tooltip="My Div 1" data-pr-position="left"/>
<div className="myDiv" data-pr-tooltip="My Div 2" data-pr-position="right" />


Calling multiple times

Code: Select all


<MyReusableComponent />
<MyReusableComponent />
<MyReusableComponent />

Will generate 3 different tooltip which focus the same class with UI issues (3 tooltips are opening when you mouse over only 1 element).

If you have to declare only one time the tooltip in the parent container, so you cannot create simple reusable components from my point of view.

EDIT :
2 first tooltip libraries on Google use the approach I describe
https://github.com/cedricdelpoux/react-simple-tooltip
https://github.com/react-component/tooltip

I'm still convinced using React and focusing elements using className/Id in containers components is a practice to avoid.

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

06 Sep 2022, 14:08

I disagree all elements should be given proper ID's so you can use in Automated UI testing.

so I would do this...

Code: Select all

MyReusableComponent
<Tooltip target={`[id^="#myDiv${props.id}"]`}  />

<div id={`#myDiv${props.id}1`} data-pr-tooltip="My Div 1" data-pr-position="left"/>
<div id={`#myDiv${props.id}2`} data-pr-tooltip="My Div 2" data-pr-position="right" />
Then...

Code: Select all

<MyReusableComponent id="one" />
<MyReusableComponent id="two" />
<MyReusableComponent id="three"  />
Last edited by Melloware on 07 Sep 2022, 13:45, edited 4 times in total.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

sphox
Posts: 4
Joined: 01 Sep 2022, 11:24

07 Sep 2022, 07:24

You are using className as an unique identifier to focus a DOM element in a react application.

Come on...

In the library source code, related to the Tooltip:

Code: Select all

static find(element, selector) {
        return element ? Array.from(element.querySelectorAll(selector)) : [];
    }
You should avoid using DOM selector in react components and use refs instead.

https://underbelly.is/writing-about/usi ... te-the-dom

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

07 Sep 2022, 13:42

Updated my example to use `id` instead of 'classname`....changing "." to "#" was hard.

Look you asked for a solution I gave you a good one and you still want to complain about it. Then write your own ToolTip component I am just a volunteer here. You can always write your own ToolTip component right?

I mean this is an open source library you haven't paid any $$$ have you??? For you to complain about how you think it should work?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

sphox
Posts: 4
Joined: 01 Sep 2022, 11:24

07 Sep 2022, 19:00

I was not looking for a quick and dirty solution but I was opening a debate about a right react approach of this component.
Thanks you for your support anyway

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests