csstwitter-bootstrapreact-bootstrapbootstrap-popover

Style of Popover from React-Bootstrap is not being applied to my component.

I am trying to implement Popover with overlay trigger in React - Bootstrap.

It is supposed to look like this

I implemented it using this code:

var {Button, Overlay, OverlayTrigger, ButtonToolbar, Popover} = require('react-bootstrap');

...
<ButtonToolbar>
<OverlayTrigger trigger="click" placement="left" overlay={<Popover title="Popover left"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
  <Button bsStyle="default">Holy guacamole!</Button>
</OverlayTrigger>
</ButtonToolbar>

I compared them using Inspect-Element. I noticed that none of the .popover styling is there for my implementation when I inspected element. Also, there is a pseudo ::after element right after the arrow component in the original (the example in the react bootstrap website). That ::after component is also missing in my implementation. I am not sure why the style is messed-up/overwritten. I'm including everything correctly I think, as per this line:

var {Button, Overlay, OverlayTrigger, ButtonToolbar, Popover} = require('react-bootstrap');

In the end, I cannot see the little arrow of the Popover in my implementation. Why is the ::after disappearing? How can I make the little arrow (triangle css) visible in my implementation?

Solution

  • The react bootstrap we use needs to be prefixed in-order to work properly. SO I needed to go into react-bootstrap and prefix popover, arrow, with bt3- prefix. Then all the styles got imported.