Mistake in overlay-trigger documentation

[nt4f04uNd]

I guess there's a mistake in example from docs https://react-bootstrap.github.io/components/overlays/#overlay-trigger

Howewer the code from this snippet shows tip correctly when I'm using this code snippet, I'm getting these warnings

Warning: React does not recognize the `outOfBoundaries` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `outofboundaries` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Warning: React does not recognize the `scheduleUpdate` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `scheduleupdate` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Warning: Received `true` for a non-boolean attribute `show`.

If you want to write it to the DOM, pass a string instead: show="true" or show={value.toString()}.

Warning: React does not recognize the `arrowProps` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `arrowprops` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

The fix to this is just exclude these props from passing ones, so this

const renderTooltip = (props:any) => (
  <div
    {...props}
    style={{
      backgroundColor: 'rgba(0, 0, 0, 0.85)',
      padding: '2px 10px',
      color: 'white',
      borderRadius: 3,
      ...props.style,
    }}
  >
    Simple tooltip
  </div>
);

Becomes that

const renderTooltip = ({placement, scheduleUpdate, arrowProps, outOfBoundaries, show, ...props}: any) => (
      <div
         {...props}
         style={{
            backgroundColor: 'rgba(0, 0, 0, 0.85)',
            padding: '2px 10px',
            color: 'white',
            borderRadius: 3,
            ...props.style,
         }}
      >
         Simple tooltip
      </div>
   );

[taion]

We'd be happy to take a PR here. Alternatively, perhaps the API could expose a props thing.

This also seems like it'd be a good fit for a hook.

[taion]

oops, didn't mean to close

[mattxwang]

Hey! Submitted a PR for this in the react-bootstrap repo here

[SimonHarte]

Thanks @malsf21 for the PR using the Tooltip component! Unfortunately I have to remark that it doesn't fully solve this problem. One warning for the show prop is still triggered (and currently fails our tests):

Warning: Received `true` for a non-boolean attribute `show`.

[mattxwang]

You're correct @SimonHarte, the PR doesn't fix the root issue - you can see the conversation in the PR's thread. Are you using the component as mentioned in the new docs?

[nt4f04uNd]

@malsf21 it is not clear whom you are asking, but as for me, it was quite long ago an I am not using it anymore

[SimonHarte]

@malsf21 I am partially by using the Bootstrap Popover component in renderOverlay (instead of Tooltip but I think they're kinda the same). I ended up with this solution, simply unmapping show and passing the rest:

const renderOverlay = ({ show: _, ...props }) => <Popover {...props}/>;

[SparkInChief]

@SimonHarte

I ended up with this solution, simply unmapping show and passing the rest

This was my workaround as well.

[mattxwang]

@taion any thoughts? I don't mind submitting a PR to update the example again, though I imagine that fixing the root problem might make more sense?

[taion]

I think the issue is that we should document the props that <Overlay> here passes in, along with guidance on which props to spread through to DOM components. That's really the root problem here in some sense – there are cases where e.g. we would need the arrow props and such.

[mattxwang]

I think the issue is that we should document the props that <Overlay> here passes in, along with guidance on which props to spread through to DOM components. That's really the root problem here in some sense – there are cases where e.g. we would need the arrow props and such.

Cool, I'll make a fork of react-bootstrap to update the docs then. Will tag this issue once I'm done!

[itsNikolay]

I fixed it with excluding outOfBoundaries and scheduleUpdate from props

       eventsEnabled={false}
       modifiers={{ flip: true }}
     >
-      {({ style, ...props }) => (
+      {({ style, outOfBoundaries, scheduleUpdate, ...props }) => (
         <Popover {...props} style={{
           ...style,
           maxWidth: 400,

[Antti-Pekka]

I guess there is still: "arrowProps" left, because I got a warning in console? outOfBoundaries and scheduleUpdate went away when updated to 1.6.4.

[Qouagga]

I have the same bug with 1.6.6.

Warning: React does not recognize the "arrowProps" prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase "arrowprops" instead. If you accidentally passed it from a parent component, remove it from the DOM element.