docs(floating-menu): update READMEs for data-floating-menu-container (#…

…961) Refs #911.
carbon-design-system · Jul 6, 2018 · 885e83d · 885e83d
1 parent dd927bd
commit 885e83d
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/src/components/overflow-menu/README.md b/src/components/overflow-menu/README.md
@@ -27,3 +27,24 @@ Use these modifiers with .bx--overflow-menu-options class.
 | `selectorOptionMenu`        | `.bx--overflow-menu-options`             | The CSS selector to find the contents of the menu
 | `objMenuOffset`    | `{ top: 3, left: 61`        | An object containing the top and left offset values in px
 | `objMenuOffsetFlip`    | `{ top: 3, left: -61`        | An object containing the top and left offset values in px for the "flipped" state
+
+### HTML
+
+By default, the menu body (`ul.bx--overflow-menu-options`) goes right under `<body>`. You can change the behavior by adding `data-floating-menu-container` to one of the DOM ancestors of the root element (`div[data-overflow-menu]`). For example, if you have HTML structure like below, the menu body will go under the second `<div>`:
+
+```html
+<body>
+  <div>
+    <div data-floating-menu-container>
+      <div>
+        <div data-overflow-menu class="bx--overflow-menu" ...>
+          ...
+          <ul class="bx--overflow-menu-options" ...>
+            ...
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+```
diff --git a/src/components/tooltip/README.md b/src/components/tooltip/README.md
@@ -28,6 +28,31 @@
 |------------------------------|------------------------------------|
 | .bx--tooltip__trigger--bold  | Modifier class to make label bold. |
 
+#### HTML
+
+By default, the tooltip (`.bx--tooltip`) goes right under `<body>`. You can change the behavior by adding `data-floating-menu-container` to one of the DOM ancestors of the tooltip's original location. For example, if you have HTML structure like below, the menu body will go under the second `<div>`:
+
+```html
+<body>
+  <div>
+    <div data-floating-menu-container>
+      <div>
+        <div class="bx--tooltip__label" ...>
+          Tooltip label
+          <div tabindex="0" data-tooltip-trigger data-tooltip-target="#unique-tooltip" class="bx--tooltip__trigger" ...>
+            ...
+          </div>
+        </div>
+        <div id="unique-tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" ...>
+          <span class="bx--tooltip__caret"></span>
+          ...
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+```
+
 ### Definition tooltip
 
 This tooltip variation does not use any JavaScript and should be used to define a word. For anything more advanced please use the main variation.