One base class component, others usual functional

[sanjarcode]

Hi guys.

Is it possible to structure a React project (say v2) such that tooltipText is a global prop picked up on any component? :unicorn::rainbow:

Like native HTML title attribute. (the naive tooltip box is not customizable, FYI)

In short - extending (OOP) the "BaseReactComponent" if there's something like that?

Approaches:

1. attribute selector shows tooltip, But works with native HTML tags only.

   • Solution

     ```css /* CSS - Base styling for tooltips */ [data-tooltip] { position: relative; cursor: pointer; } [data-tooltip]::before { content: attr(data-tooltip); position: absolute; bottom: 100%; /* Position above the element */ left: 50%; transform: translateX(-50%); padding: 0.5em 1em; background-color: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; } /* Show the tooltip on hover */ [data-tooltip]:hover::before { opacity: 1; visibility: visible; } ```

   JSX
   <span data-tooltip="Tooltip text" >Hello, world</span>

   -- @amolikvivian

2. Wrapper that has a span (that does point 1). Con: only tooltips will be visible.

   • Solution

   /* CSS - same as .1 */

    export default function TooltipWrapper({ children, tooltipText }) {
       <span data-tooltip={tooltipText}>{children}</span>;
    }
   
    <TooltipWrapper tooltipText="wefbwfw">
        <MyComponent />
   <TooltipWrapper />    

3. Original - detect prop passed to custom component. Weren't able to do.

// after some time...

Ok guys ~1 hr on this I've spent.

Lesson learnt: if you want complete control, make 'One' class component, then use it in all functional components.

Extensibility ftw, perf idk

[sanjarcode]

todo: See if this is viable

[sanjarcode]

The data-* attribute and injecting UI trick, used here: https://github.com/zenorocha/clipboard.js explore, especially perf.