From 885e83d4af5849f8ea6b3b642803fa9011c443c3 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Fri, 6 Jul 2018 23:35:41 +0900 Subject: [PATCH] docs(floating-menu): update READMEs for data-floating-menu-container (#961) Refs #911. --- src/components/overflow-menu/README.md | 21 +++++++++++++++++++++ src/components/tooltip/README.md | 25 +++++++++++++++++++++++++ 2 files changed, 46 insertions(+) diff --git a/src/components/overflow-menu/README.md b/src/components/overflow-menu/README.md index 1dc03a534c66..7f5de47c8db0 100644 --- 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 ``. 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 `
`: + +```html + +
+
+
+
+ ... +
    + ... +
+
+
+
+
+ +``` diff --git a/src/components/tooltip/README.md b/src/components/tooltip/README.md index 3177edaba78b..f3f774abb336 100644 --- 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 ``. 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 `
`: + +```html + +
+
+
+
+ Tooltip label +
+ ... +
+
+
+ + ... +
+
+
+
+ +``` + ### 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.