Custom React-Bootstrap Popover

Question

I want to create a custom react popover, based on Bootstrap Popover, just with my own design and maybe more props.

I created a new react component called MyTooltip :

import React, {Component} from 'react';
import { Popover } from 'react-bootstrap';

export default class MyPopover extends Component{
  constructor(props){
    super(props);
  }

  render() {
    return (
        <Popover id="popover-trigger-focus" title={this.props.title}>
           { return this.props.children }
        </Popover>
    );
  }
}

and in my main component I tried to create a trigger:

export default class MyMainComponent extends Component{

  render() {

    const popoverFocus = (
        <MyPopover id="tooltip-trigger-focus"  title="My Title">
          my text <b>my bold text</b> my text
        </MyPopover >
    );

    return (
      <div >

          <OverlayTrigger trigger="focus" placement="bottom" overlay={popoverFocus}>
            <Button>Focus</Button>
          </OverlayTrigger>

      </div>
    );
  }
}

But it doesn't work. The button does hide and show the popover with the right text, but the popover ignores the "placement" property and it doesn't have the fade animation.

Any help will be useful...

Answer 1

You've set the placement and overlay prop to the <OverlayTrigger/> element, but those belong on the Popover. You can quickly fix this by letting the popover inherit the props from the trigger element like so:

render() {
  return (
    <Popover id="popover-trigger-focus" title={this.props.title} {...this.props}>
        { this.props.children }
    </Popover>
  );
}

Here's your example with {...this.props}.

PS: You don't need to return JS in JSX (e.g. { return this.props.children }). You can just leave that out ({ this.props.children }).