{"action":"closed","issue":{"url":"https://api.github.com/repos/littlebits/react-popover/issues/7","labels_url":"https://api.github.com/repos/littlebits/react-popover/issues/7/labels{/name}","comments_url":"https://api.github.com/repos/littlebits/react-popover/issues/7/comments","events_url":"https://api.github.com/repos/littlebits/react-popover/issues/7/events","html_url":"https://github.com/littlebits/react-popover/issues/7","id":66746672,"number":7,"title":"Research how layers will work","user":{"login":"jasonkuhrt","id":284476,"avatar_url":"https://avatars.githubusercontent.com/u/284476?v=3","gravatar_id":"","url":"https://api.github.com/users/jasonkuhrt","html_url":"https://github.com/jasonkuhrt","followers_url":"https://api.github.com/users/jasonkuhrt/followers","following_url":"https://api.github.com/users/jasonkuhrt/following{/other_user}","gists_url":"https://api.github.com/users/jasonkuhrt/gists{/gist_id}","starred_url":"https://api.github.com/users/jasonkuhrt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jasonkuhrt/subscriptions","organizations_url":"https://api.github.com/users/jasonkuhrt/orgs","repos_url":"https://api.github.com/users/jasonkuhrt/repos","events_url":"https://api.github.com/users/jasonkuhrt/events{/privacy}","received_events_url":"https://api.github.com/users/jasonkuhrt/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-04-07T01:34:00Z","updated_at":"2015-04-09T14:45:45Z","closed_at":"2015-04-09T14:45:45Z","body":"After trying to refactor into a usable and likely more-correct system from the current nonsense that this sketch is using, I quickly realized that I've got the hardest part of the problem ahead of me:\r\n\r\n- https://github.com/react-bootstrap/react-bootstrap/issues/27\r\n- https://github.com/facebook/react/issues/379\r\n- https://github.com/pieterv/react-layers\r\n- http://khan.github.io/react-components/#layered-component\r\n\r\n@stresslimit So the current takeaways:\r\n- Indeed the popover is not supposed to be rendered around its target as-far-as the DOM tree is concerned\r\n- Another concept is required altogether which goes along the lines of \"layers\" but has different implementations.\r\n\r\nExample from React Bootstrap: http://react-bootstrap.github.io/components.html#popovers\r\n\r\n```\r\n    <OverlayTrigger trigger='click' placement='left' overlay={<Popover title='Popover left'><strong>Holy guacamole!</strong> Check this info.</Popover>}>\r\n      <Button bsStyle='default'>Holy guacamole!</Button>\r\n    </OverlayTrigger>\r\n```\r\n\r\nThe good news is I am not crazy; all my concerns and notes about the problem I'm seeing unfold/thinking-through are leading to the right place. For example I basically came to this conclusion on the way home repeated by someone else way before:\r\n\r\nhttps://github.com/react-bootstrap/react-bootstrap/issues/27#issuecomment-34431648\r\n\r\n> 2) Attach the modal pane to the document body, and wire it up to the trigger via refs and callbacks. The communication chain in React will be fiddly, but this will be an implementation-internal issue. I think this will involve some black magic, but will be a more solid implementation.\r\n\r\nTo paraphrase, have `popover` completely pass-through its children in its `render` and then render its own `popover` component to the `body`.\r\n\r\nIt seems that all discussion culminate in the `OverlayTrigger` component in Bootstrap React and the dedicated repo linked above `pieterv/react-layers`.\r\n\r\nLastly, in case readers do not read the links, keep in mind these links include discussions and references from the core community so this issue is taking from \"trusted\" minds in this domain."}}