Merge pull request react-bootstrap#1374 from taion/contained-popover-…

…examples Fix contained popover examples
Kimahriman · Oct 3, 2015 · f156564 · f156564
2 parents 1b2b775 + df96a40
commit f156564
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 20 deletions.
diff --git a/docs/assets/style.css b/docs/assets/style.css
@@ -113,7 +113,6 @@ body {
 
 .bs-example-popover-scroll > div {
   position: relative;
-  padding: 100px 0;
 }
 
 .playground {

diff --git a/docs/examples/PopoverContained.js b/docs/examples/PopoverContained.js
@@ -17,7 +17,7 @@ class Example extends React.Component {
           show={this.state.show}
           target={()=> React.findDOMNode(this.state.target)}
           placement="bottom"
-          container={mountNode}
+          container={this}
           containerPadding={20}
         >
           <Popover title="Popover bottom">
@@ -29,4 +29,4 @@ class Example extends React.Component {
   }
 }
 
-React.render(<Example/>, mountNode);
+React.render(<Example />, mountNode);
diff --git a/docs/examples/PopoverPositionedScrolling.js b/docs/examples/PopoverPositionedScrolling.js
@@ -1,18 +1,22 @@
-const positionerInstance = (
-  <ButtonToolbar>
-    <OverlayTrigger container={mountNode} trigger="click" placement="left" overlay={<Popover title="Popover left"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
-      <Button bsStyle="default">Holy guacamole!</Button>
-    </OverlayTrigger>
-    <OverlayTrigger container={mountNode} trigger="click" placement="top" overlay={<Popover title="Popover top"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
-      <Button bsStyle="default">Holy guacamole!</Button>
-    </OverlayTrigger>
-    <OverlayTrigger container={mountNode} trigger="click" placement="bottom" overlay={<Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
-      <Button bsStyle="default">Holy guacamole!</Button>
-    </OverlayTrigger>
-    <OverlayTrigger container={mountNode} trigger="click" placement="right" overlay={<Popover title="Popover right"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
-      <Button bsStyle="default">Holy guacamole!</Button>
-    </OverlayTrigger>
-  </ButtonToolbar>
-);
+class Positioner extends React.Component {
+  render() {
+    return (
+      <ButtonToolbar style={{padding: '100px 0'}}>
+        <OverlayTrigger container={this} trigger="click" placement="left" overlay={<Popover title="Popover left"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
+          <Button bsStyle="default">Holy guacamole!</Button>
+        </OverlayTrigger>
+        <OverlayTrigger container={this} trigger="click" placement="top" overlay={<Popover title="Popover top"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
+          <Button bsStyle="default">Holy guacamole!</Button>
+        </OverlayTrigger>
+        <OverlayTrigger container={this} trigger="click" placement="bottom" overlay={<Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
+          <Button bsStyle="default">Holy guacamole!</Button>
+        </OverlayTrigger>
+        <OverlayTrigger container={this} trigger="click" placement="right" overlay={<Popover title="Popover right"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
+          <Button bsStyle="default">Holy guacamole!</Button>
+        </OverlayTrigger>
+      </ButtonToolbar>
+    );
+  }
+}
 
-React.render(positionerInstance, mountNode);
+React.render(<Positioner />, mountNode);