{"action":"created","issue":{"url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/1112","labels_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/1112/labels{/name}","comments_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/1112/comments","events_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/1112/events","html_url":"https://github.com/react-bootstrap/react-bootstrap/issues/1112","id":99303300,"number":1112,"title":"Using Bootstrap Popovers in React without JSX","user":{"login":"vgoklani","id":180487,"avatar_url":"https://avatars.githubusercontent.com/u/180487?v=3","gravatar_id":"","url":"https://api.github.com/users/vgoklani","html_url":"https://github.com/vgoklani","followers_url":"https://api.github.com/users/vgoklani/followers","following_url":"https://api.github.com/users/vgoklani/following{/other_user}","gists_url":"https://api.github.com/users/vgoklani/gists{/gist_id}","starred_url":"https://api.github.com/users/vgoklani/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vgoklani/subscriptions","organizations_url":"https://api.github.com/users/vgoklani/orgs","repos_url":"https://api.github.com/users/vgoklani/repos","events_url":"https://api.github.com/users/vgoklani/events{/privacy}","received_events_url":"https://api.github.com/users/vgoklani/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-08-05T21:30:31Z","updated_at":"2015-08-06T10:33:57Z","closed_at":null,"body":"I'm trying to re-create this example without JSX:\r\n\r\nhttp://react-bootstrap.github.io/components.html#popovers-overlay-trigger\r\n\r\nIn particular, this line is causing me a headache:\r\n\r\n\t <OverlayTrigger trigger='click' placement='left' overlay={<Popover title='Popover left'><strong>Holy guacamole!</strong> Check this info.</Popover>}>\r\n\t      <Button bsStyle='default'>Holy guacamole!</Button>\r\n\t </OverlayTrigger>\r\n\r\nand my (more verbose) version:\r\n\r\n\tReact.createElement(\"div\", {id:\"some_id\"},\r\n\t\tReact.createElement(ReactBootstrap.OverlayTrigger, {container:\"#some_id\" , trigger:'click', placement:'left', overlay:\r\n\t\t\tReact.createElement(ReactBootstrap.Popover, {'title':'Popover left'},\r\n\t\t\t\tReact.createElement(\"strong\", {}, \"Check this info.\")\r\n\t\t\t)\r\n\t\t})\r\n\t)\r\n\r\nThe keyword \"overlay\" has me confused, as I'm not clear on how to rewrite it. I'm also unclear as to how to properly attach the mountNode to the parent div element, \"#some_id\". document.getElementbyId() doesn't work.\r\n\r\nThis is the error message I get when running the above:\r\n\r\n    Uncaught Error: Invariant Violation: onlyChild must be passed a children with exactly one child."},"comment":{"url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/comments/128319387","html_url":"https://github.com/react-bootstrap/react-bootstrap/issues/1112#issuecomment-128319387","issue_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/1112","id":128319387,"user":{"login":"AlexKVal","id":847572,"avatar_url":"https://avatars.githubusercontent.com/u/847572?v=3","gravatar_id":"","url":"https://api.github.com/users/AlexKVal","html_url":"https://github.com/AlexKVal","followers_url":"https://api.github.com/users/AlexKVal/followers","following_url":"https://api.github.com/users/AlexKVal/following{/other_user}","gists_url":"https://api.github.com/users/AlexKVal/gists{/gist_id}","starred_url":"https://api.github.com/users/AlexKVal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AlexKVal/subscriptions","organizations_url":"https://api.github.com/users/AlexKVal/orgs","repos_url":"https://api.github.com/users/AlexKVal/repos","events_url":"https://api.github.com/users/AlexKVal/events{/privacy}","received_events_url":"https://api.github.com/users/AlexKVal/received_events","type":"User","site_admin":false},"created_at":"2015-08-06T10:33:57Z","updated_at":"2015-08-06T10:33:57Z","body":"or [babeljs.io/repl](http://babeljs.io/repl/#?experimental=true&evaluate=true&loose=false&spec=false&code=%3COverlayTrigger%20trigger%3D'click'%20placement%3D'left'%20overlay%3D%7B%3CPopover%20title%3D'Popover%20left'%3E%3Cstrong%3EHoly%20guacamole!%3C%2Fstrong%3E%20Check%20this%20info.%3C%2FPopover%3E%7D%3E%0A%20%20%20%20%20%20%3CButton%20bsStyle%3D'default'%3EHoly%20guacamole!%3C%2FButton%3E%0A%20%3C%2FOverlayTrigger%3E) :cherries: "}}