not aligning properly

[bezreyhan]

Under certain circumstances, the tooltip is positioned below and to the right of the target. I'm not sure what is causing it. Have you run into this before?

The target is the turquoise circle that contains a "?".

[bezreyhan]

It seems that the height and width of the tooltip are not being calculated correctly.

document.querySelector('[data-id='tooltip']').clientHeight = 16

This is the box model for the tooltip. It looks like the padding is the only attribute that is being factored into the clientHeight property.

[wwayne]

No, I haven't run into this, I guess it more likely because of the html structure or css of the turquoise circle, so can you give me some specific code? and what browser you were using ?

[bezreyhan]

It's happening on Chrome. I think your right about the it being related to the html structure. I'm conditionally rendering the tooltip, which is causing a few problems.

render() {
  <div>
    {
      if this.state.isConfirmed
        <div>
          Enter your two-factor code to complete this change
          <div data-tip='This is a new tooltip. Does it work?' data-place='top' className='question-tooltip-gray-icon'/>
          <Tooltip place='top' type='dark' effect='solid' />
        </div>
    }
    <button className='cancel-btn' type='button' onClick={closeModal}>
      Cancel
    </button>
</div>
}

The problem is that document.querySelector('[data-id=\'tooltip\']') is accessing a different tooltip on the page. It might help if we we use React.findDOMNode(this) instead. I'm actually not sure how document.querySelector('[data-id=\'tooltip\']') is working at all since there are multiple tooltips on the page. Won't it just select the 1st tooltip that matches rather than the current instance of the tooltip?

[wwayne]

Make some fixed, you can try it now.
Put <Tooltip /> outside the condition. Only one <Tooltip /> in a page is enough.

Your example:

<div>
    {
      if this.state.isConfirmed
        <div>
          Enter your two-factor code to complete this change
          <div data-tip='This is a new tooltip. Does it work?'  className='question-tooltip-gray-icon'/>
        </div>
    }
    <button className='cancel-btn' type='button' onClick={closeModal}>
      Cancel
    </button>
    <Tooltip />
</div>

[bezreyhan]

Is it on npm or should I use master?

[wwayne]

npm, it shoule be 0.3.1

[wwayne]

on wait, make some change

[bezreyhan]

cool. Also, if I want to make a pull request, do you have a set of instructions for building the file.

[wwayne]

ok, 0.3.2

[wwayne]

you can edit the file in src > js > index.jsx, that is source file. Then execute npm run build in root to compile the source file. That's it.

[bezreyhan]

cool, I'll give the updated package a shot.

[bezreyhan]

That seems to have fixed it. What did you change?

Also, for my own knowledge, why are you using document.querySelectorAll('[data-tip]'); instead of React.findDOMNode(this)?

Also, on componentDidMount why are you looping over all tooltips and adding an event listener? Shouldn't we just at the event listener to the current instance of tooltip?

[wwayne]

I bind and unbind event listener in componentWillUpdate and componentDidUpdate.

I don't know if React.findDOMNode(this) can do the same thing? I just want to select all elements that having attribute data-tip.

Add event listener in componentDidMount is for binding tooltip in every element that need tooltip, so you don't need add <Tooltip /> in different place, only one <Tooltip /> in one page. Then use data-tip to control which element can have tooltip.