{"action":"created","issue":{"url":"https://api.github.com/repos/wwayne/react-tooltip/issues/44","labels_url":"https://api.github.com/repos/wwayne/react-tooltip/issues/44/labels{/name}","comments_url":"https://api.github.com/repos/wwayne/react-tooltip/issues/44/comments","events_url":"https://api.github.com/repos/wwayne/react-tooltip/issues/44/events","html_url":"https://github.com/wwayne/react-tooltip/issues/44","id":113375634,"number":44,"title":"ReactTooltip element contents displayed if another tooltip no longer rendered","user":{"login":"dpwrussell","id":1889043,"avatar_url":"https://avatars.githubusercontent.com/u/1889043?v=3","gravatar_id":"","url":"https://api.github.com/users/dpwrussell","html_url":"https://github.com/dpwrussell","followers_url":"https://api.github.com/users/dpwrussell/followers","following_url":"https://api.github.com/users/dpwrussell/following{/other_user}","gists_url":"https://api.github.com/users/dpwrussell/gists{/gist_id}","starred_url":"https://api.github.com/users/dpwrussell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dpwrussell/subscriptions","organizations_url":"https://api.github.com/users/dpwrussell/orgs","repos_url":"https://api.github.com/users/dpwrussell/repos","events_url":"https://api.github.com/users/dpwrussell/events{/privacy}","received_events_url":"https://api.github.com/users/dpwrussell/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-10-26T15:04:10Z","updated_at":"2015-11-03T00:05:18Z","closed_at":"2015-11-03T00:01:43Z","body":"If a tooltip on the page is no longer rendered then the contents of the other tooltips are rendered to the page in their dom location. This will happen if the tooltip element itself is no longer rendered, or if an element containing a tooltip is no longer rendered.\r\n\r\nThe problem corrects itself for all tooltips when another tooltip is moused over.\r\n\r\nThis example has 3 divs with mouseover tooltips. It also has 3 buttons which toggle the display of that tooltip off. When toggling the display of one of the tooltips off, the content of the other two is displayed until you mouseover one of the remaining tooltip enabled divs.\r\n\r\n``` javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport ReactTooltip from 'react-tooltip';\r\n\r\nclass TooltipProblem extends React.Component {\r\n  constructor(props) {\r\n      super(props);\r\n\r\n      this.state = {\r\n        showTooltip1: true,\r\n        showTooltip2: true,\r\n        showTooltip3: true\r\n      }\r\n\r\n      // Prebind 'this' to methods\r\n      this._handleClick1 = this._handleClick1.bind(this);\r\n      this._handleClick2 = this._handleClick2.bind(this);\r\n      this._handleClick3 = this._handleClick3.bind(this);\r\n  }\r\n\r\n  _handleClick1() {\r\n    this.setState(\r\n      {\r\n        showTooltip1: !this.state.showTooltip1\r\n      }\r\n    )\r\n  }\r\n\r\n  _handleClick2() {\r\n    this.setState(\r\n      {\r\n        showTooltip2: !this.state.showTooltip2\r\n      }\r\n    )\r\n  }\r\n\r\n  _handleClick3() {\r\n    this.setState(\r\n      {\r\n        showTooltip3: !this.state.showTooltip3\r\n      }\r\n    )\r\n  }\r\n\r\n  render() {\r\n\r\n    return (\r\n      <div>\r\n\r\n        <div data-tip\r\n             data-for={\"tooltip1\"}>Mouseover1</div>\r\n        {this.state.showTooltip1 &&\r\n          <ReactTooltip id={\"tooltip1\"} place=\"bottom\" type=\"dark\" effect=\"solid\">\r\n            <p>My tooltip 1</p>\r\n          </ReactTooltip>\r\n        }\r\n      <input type=\"button\" onClick={this._handleClick1} value=\"Toggle 1\" />\r\n\r\n      <br /><br />\r\n\r\n      <div data-tip\r\n           data-for={\"tooltip2\"}>Mouseover2</div>\r\n      {this.state.showTooltip2 &&\r\n        <ReactTooltip id={\"tooltip2\"} place=\"bottom\" type=\"dark\" effect=\"solid\">\r\n          <p>My tooltip 2</p>\r\n        </ReactTooltip>\r\n      }\r\n    <input type=\"button\" onClick={this._handleClick2} value=\"Toggle 2\" />\r\n\r\n    <br /><br />\r\n\r\n    <div data-tip\r\n         data-for={\"tooltip3\"}>Mouseover3</div>\r\n    {this.state.showTooltip3 &&\r\n      <ReactTooltip id={\"tooltip3\"} place=\"bottom\" type=\"dark\" effect=\"solid\">\r\n        <p>My tooltip 3</p>\r\n      </ReactTooltip>\r\n    }\r\n    <input type=\"button\" onClick={this._handleClick3} value=\"Toggle 3\" />\r\n\r\n      </div>\r\n    );\r\n  }\r\n\r\n}\r\n\r\n\r\n(function() {\r\n    'use strict';\r\n\r\n    ReactDOM.render(<TooltipProblem />, document.getElementById('app'));\r\n})();\r\n\r\n```\r\n\r\nThis is a simplified example, toggling the actual tooltips on/off, but as I mentioned, it happens if any tooltip is no longer rendered. So if you use tooltips in two different components and then one of those components is no longer rendered, you see this problem.\r\n\r\nTooltip displaying correctly:\r\n\r\n![before](https://cloud.githubusercontent.com/assets/1889043/10732551/fdbd6420-7bd0-11e5-9d0a-b61cab0b4b83.png)\r\n\r\nAfter toggling off the display of a tooltip element (3 in this case):\r\n\r\n![after](https://cloud.githubusercontent.com/assets/1889043/10732550/fdbb9848-7bd0-11e5-978d-6ce3db52728b.png)\r\n\r\nAs you can see, \"My Tooltip 1\" and \"My Tooltip 2\" are rendered to the screen, which should not happen.\r\n\r\nCheers"},"comment":{"url":"https://api.github.com/repos/wwayne/react-tooltip/issues/comments/153198060","html_url":"https://github.com/wwayne/react-tooltip/issues/44#issuecomment-153198060","issue_url":"https://api.github.com/repos/wwayne/react-tooltip/issues/44","id":153198060,"user":{"login":"wwayne","id":5305874,"avatar_url":"https://avatars.githubusercontent.com/u/5305874?v=3","gravatar_id":"","url":"https://api.github.com/users/wwayne","html_url":"https://github.com/wwayne","followers_url":"https://api.github.com/users/wwayne/followers","following_url":"https://api.github.com/users/wwayne/following{/other_user}","gists_url":"https://api.github.com/users/wwayne/gists{/gist_id}","starred_url":"https://api.github.com/users/wwayne/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wwayne/subscriptions","organizations_url":"https://api.github.com/users/wwayne/orgs","repos_url":"https://api.github.com/users/wwayne/repos","events_url":"https://api.github.com/users/wwayne/events{/privacy}","received_events_url":"https://api.github.com/users/wwayne/received_events","type":"User","site_admin":false},"created_at":"2015-11-03T00:05:18Z","updated_at":"2015-11-03T00:05:18Z","body":"This is because the style of react-tooltip will be removed after unmount.\r\nNow I keep the style because I don't think the previous process is necessary.\r\n\r\nBut I still think it is a bit weird of this example, re-open this issue if we can find a more 'delicate' way"}}