Tooltip appears in the wrong position

Issue description

• components: tooltip (maybe also others that use popper)
• reactstrap version #5.0.0
• import method not sure
• react version #16.3.0
• bootstrap version #4.0.0

What is happening?

The tooltip does not appear in the correct position. Some of the css properties does not appear to be set, namely the transform and top/left properties seem to be missing.

What should be happening?

Tooltip should appear in the correct position

Steps to reproduce issue

1. Create a new app with create-react-app
2. add bootstrap and reactstrap
3. Add a tooltip
4. Tooltip does not appear in correct position

Code

I could for some reason not get it to show the error in the codepen when I tried earlier. Not sure if it’s a version mismatch or something of the sort.

But you can see the error here: https://reactstrap-error-tooltip.firebaseapp.com/

And the git repo is here: https://github.com/Maistho/reactstrap-tooltip-error

I’ve spent way too long trying to find exactly where the issue is, and I’m not sure if the issue is in reactstrap or in popper or in react-popper. I need some help 😢

[TheSharpieOne]

fixed upstream. If anyone else runs into this, removing node_modules and doing a fresh install should grab a version of Popper.js (within the server range) which doesn’t have this issue

[miguel-guedes]

I’m also seeing a very odd issue here whereby the tooltip’s arrow is correctly positioned but its text element is not; see screenshots below. Bad news is I seem to be running up-to-date packages:

$ npm ls popper.js
ingnosis@0.0.1 /home/miguelg/prj/ingnosis
└─┬ reactstrap@6.5.0
  └─┬ react-popper@0.10.4
    └── popper.js@1.14.4 

What I find odd is the y translation of the toottip’s wrapper element:

Anyone spotted this issue before?

---

Tooltip

        <Tooltip placement="left" target="btn-document-new" isOpen={this.state.open}>
          Please select a project first
        </Tooltip>

Target:

        <DropdownToggle caret id="btn-document-new" disabled={disabled} color="success">
          <ReactIcon icon={FaPlus} label="Add" />
        </DropdownToggle>