@khanacademy/wonder-blocks-tooltip 1.3.0

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -0,0 +1,2674 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`wonder-blocks-tooltip example 1 1`] = `
+<span
+  aria-describedby="uid-tooltip-0-aria-content"
+  className=""
+  style={
+    Object {
+      "MozOsxFontSmoothing": "grayscale",
+      "WebkitFontSmoothing": "antialiased",
+    }
+  }
+>
+  Some text
+</span>
+`;
+
+exports[`wonder-blocks-tooltip example 2 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  Some text
+  <input
+    aria-describedby="my-a11y-tooltip"
+  />
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 3 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <div
+    className=""
+    style={
+      Object {
+        "alignItems": "stretch",
+        "border": "1px solid black",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "column",
+        "height": 100,
+        "margin": 10,
+        "minHeight": 0,
+        "minWidth": 0,
+        "overflow": "auto",
+        "padding": 0,
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "margin": 0,
+          "minHeight": "200vh",
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    >
+      <span
+        className=""
+        style={
+          Object {
+            "MozOsxFontSmoothing": "grayscale",
+            "WebkitFontSmoothing": "antialiased",
+            "display": "block",
+            "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+            "fontSize": 16,
+            "fontWeight": 400,
+            "lineHeight": "22px",
+          }
+        }
+      >
+        This is a big long piece of text with a
+        <span
+          aria-describedby="uid-tooltip-1-aria-content"
+          className=""
+          style={
+            Object {
+              "MozOsxFontSmoothing": "grayscale",
+              "WebkitFontSmoothing": "antialiased",
+            }
+          }
+        >
+          [tooltip]
+        </span>
+        <span>
+           
+        </span>
+        in the middle.
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 4 1`] = `
+<button
+  className=""
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onDragStart={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  role="button"
+  style={
+    Object {
+      "::MozFocusInner": Object {
+        "border": 0,
+      },
+      ":focus": Object {
+        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+      },
+      "alignItems": "center",
+      "background": "#1865f2",
+      "border": "none",
+      "borderRadius": 4,
+      "boxSizing": "border-box",
+      "color": "#ffffff",
+      "cursor": "pointer",
+      "display": "inline-flex",
+      "height": 40,
+      "justifyContent": "center",
+      "margin": 0,
+      "outline": "none",
+      "paddingBottom": 0,
+      "paddingLeft": 16,
+      "paddingRight": 16,
+      "paddingTop": 0,
+      "position": "relative",
+      "textDecoration": "none",
+      "touchAction": "manipulation",
+      "userSelect": "none",
+    }
+  }
+  tabIndex={0}
+  type="button"
+>
+  <span
+    className=""
+    style={
+      Object {
+        "MozOsxFontSmoothing": "grayscale",
+        "WebkitFontSmoothing": "antialiased",
+        "alignItems": "center",
+        "display": "inline-block",
+        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontSize": 16,
+        "fontWeight": "bold",
+        "lineHeight": "20px",
+        "overflow": "hidden",
+        "pointerEvents": "none",
+        "textOverflow": "ellipsis",
+        "whiteSpace": "nowrap",
+      }
+    }
+  >
+    Click here!
+  </span>
+</button>
+`;
+
+exports[`wonder-blocks-tooltip example 5 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <span
+    className=""
+    style={
+      Object {
+        "MozOsxFontSmoothing": "grayscale",
+        "WebkitFontSmoothing": "antialiased",
+        "display": "block",
+        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontSize": 14,
+        "fontWeight": 400,
+        "lineHeight": "18px",
+      }
+    }
+  >
+    Here, we can see that the first tooltip shown has an initial delay before it appears, as does the last tooltip shown, yet when moving between tooltipped items, the transition from one to another is instantaneous.
+  </span>
+  <div
+    className=""
+    style={
+      Object {
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "row",
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      aria-describedby="uid-tooltip-2-aria-content"
+      className=""
+      style={
+        Object {
+          "alignItems": "center",
+          "border": "solid 1px steelblue",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 32,
+          "justifyContent": "center",
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "width": 32,
+          "zIndex": 0,
+        }
+      }
+    >
+      A
+    </div>
+    <div
+      aria-describedby="uid-tooltip-3-aria-content"
+      className=""
+      style={
+        Object {
+          "alignItems": "center",
+          "border": "solid 1px steelblue",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 32,
+          "justifyContent": "center",
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "width": 32,
+          "zIndex": 0,
+        }
+      }
+    >
+      B
+    </div>
+    <div
+      aria-describedby="uid-tooltip-4-aria-content"
+      className=""
+      style={
+        Object {
+          "alignItems": "center",
+          "border": "solid 1px steelblue",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 32,
+          "justifyContent": "center",
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "width": 32,
+          "zIndex": 0,
+        }
+      }
+    >
+      C
+    </div>
+    <div
+      aria-describedby="uid-tooltip-5-aria-content"
+      className=""
+      style={
+        Object {
+          "alignItems": "center",
+          "border": "solid 1px steelblue",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 32,
+          "justifyContent": "center",
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "width": 32,
+          "zIndex": 0,
+        }
+      }
+    >
+      D
+    </div>
+  </div>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 6 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "center",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "row",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <button
+    aria-describedby="uid-tooltip-6-aria-content"
+    className=""
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+    role="button"
+    style={
+      Object {
+        "::MozFocusInner": Object {
+          "border": 0,
+        },
+        ":focus": Object {
+          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+        },
+        "alignItems": "center",
+        "background": "#1865f2",
+        "border": "none",
+        "borderRadius": 4,
+        "boxSizing": "border-box",
+        "color": "#ffffff",
+        "cursor": "pointer",
+        "display": "inline-flex",
+        "height": 40,
+        "justifyContent": "center",
+        "margin": 0,
+        "outline": "none",
+        "paddingBottom": 0,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 0,
+        "position": "relative",
+        "textDecoration": "none",
+        "touchAction": "manipulation",
+        "userSelect": "none",
+      }
+    }
+    tabIndex={0}
+    type="button"
+  >
+    <span
+      className=""
+      style={
+        Object {
+          "MozOsxFontSmoothing": "grayscale",
+          "WebkitFontSmoothing": "antialiased",
+          "alignItems": "center",
+          "display": "inline-block",
+          "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+          "fontSize": 16,
+          "fontWeight": "bold",
+          "lineHeight": "20px",
+          "overflow": "hidden",
+          "pointerEvents": "none",
+          "textOverflow": "ellipsis",
+          "whiteSpace": "nowrap",
+        }
+      }
+    >
+      Click me!
+    </span>
+  </button>
+  <div
+    aria-hidden="true"
+    className=""
+    style={
+      Object {
+        "MsFlexBasis": 16,
+        "MsFlexPreferredSize": 16,
+        "WebkitFlexBasis": 16,
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexBasis": 16,
+        "flexDirection": "column",
+        "flexShrink": 0,
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "position": "relative",
+        "width": 16,
+        "zIndex": 0,
+      }
+    }
+  />
+  <button
+    aria-describedby="uid-tooltip-7-aria-content"
+    aria-label="search"
+    className=""
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+    style={
+      Object {
+        "::MozFocusInner": Object {
+          "border": 0,
+        },
+        ":focus": Object {
+          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+        },
+        "alignItems": "center",
+        "background": "none",
+        "border": "none",
+        "boxSizing": "border-box",
+        "color": "#1865f2",
+        "cursor": "pointer",
+        "display": "inline-flex",
+        "height": 40,
+        "justifyContent": "center",
+        "margin": -8,
+        "outline": "none",
+        "padding": 0,
+        "position": "relative",
+        "textDecoration": "none",
+        "touchAction": "manipulation",
+        "width": 40,
+      }
+    }
+    tabIndex={0}
+    type="button"
+  >
+    <svg
+      className=""
+      height={24}
+      style={
+        Object {
+          "display": "inline-block",
+          "flexGrow": 0,
+          "flexShrink": 0,
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 24 24"
+      width={24}
+    >
+      <path
+        d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
+        fill="currentColor"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 7 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": "10px 16px",
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <span
+    className=""
+    style={
+      Object {
+        "MozOsxFontSmoothing": "grayscale",
+        "WebkitFontSmoothing": "antialiased",
+        "display": "block",
+        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontSize": 16,
+        "fontWeight": 400,
+        "lineHeight": "20px",
+      }
+    }
+  >
+    Only the content
+  </span>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 8 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 16,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <h4
+    className=""
+    style={
+      Object {
+        "MozOsxFontSmoothing": "grayscale",
+        "WebkitFontSmoothing": "antialiased",
+        "display": "block",
+        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontSize": 20,
+        "fontWeight": 700,
+        "lineHeight": "24px",
+        "marginBottom": 0,
+        "marginTop": 0,
+      }
+    }
+  >
+    Title text!
+  </h4>
+  <div
+    aria-hidden="true"
+    className=""
+    style={
+      Object {
+        "MsFlexBasis": 4,
+        "MsFlexPreferredSize": 4,
+        "WebkitFlexBasis": 4,
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexBasis": 4,
+        "flexDirection": "column",
+        "flexShrink": 0,
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "position": "relative",
+        "width": 4,
+        "zIndex": 0,
+      }
+    }
+  />
+  <span
+    className=""
+    style={
+      Object {
+        "MozOsxFontSmoothing": "grayscale",
+        "WebkitFontSmoothing": "antialiased",
+        "display": "block",
+        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontSize": 16,
+        "fontWeight": 400,
+        "lineHeight": "20px",
+      }
+    }
+  >
+    Some content in my content
+  </span>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 9 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 16,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <span
+    className=""
+    style={
+      Object {
+        "MozOsxFontSmoothing": "grayscale",
+        "WebkitFontSmoothing": "antialiased",
+        "display": "block",
+        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontSize": 16,
+        "fontWeight": 400,
+        "lineHeight": "22px",
+      }
+    }
+  >
+    Body text title!
+  </span>
+  <div
+    aria-hidden="true"
+    className=""
+    style={
+      Object {
+        "MsFlexBasis": 4,
+        "MsFlexPreferredSize": 4,
+        "WebkitFlexBasis": 4,
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexBasis": 4,
+        "flexDirection": "column",
+        "flexShrink": 0,
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "position": "relative",
+        "width": 4,
+        "zIndex": 0,
+      }
+    }
+  />
+  <span
+    className=""
+    style={
+      Object {
+        "MozOsxFontSmoothing": "grayscale",
+        "WebkitFontSmoothing": "antialiased",
+        "display": "block",
+        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontSize": 16,
+        "fontWeight": 400,
+        "lineHeight": "22px",
+      }
+    }
+  >
+    Body text content!
+  </span>
+  <span
+    className=""
+    style={
+      Object {
+        "MozOsxFontSmoothing": "grayscale",
+        "WebkitFontSmoothing": "antialiased",
+        "display": "block",
+        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+        "fontSize": 14,
+        "fontWeight": 400,
+        "lineHeight": "18px",
+      }
+    }
+  >
+    And LabelSmall!
+  </span>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 10 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <div
+    className=""
+    data-placement="top"
+    style={
+      Object {
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "column",
+        "height": 20,
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "pointerEvents": "none",
+        "position": "relative",
+        "top": -1,
+        "width": 40,
+        "zIndex": 0,
+      }
+    }
+  >
+    <svg
+      className="arrow_oo4scr"
+      height={12}
+      style={
+        Object {
+          "marginLeft": 8,
+          "marginRight": 8,
+          "paddingBottom": 8,
+        }
+      }
+      width={24}
+    >
+      <filter
+        height="200%"
+        id="tooltip-dropshadow-top-0"
+        width="200%"
+        x="-50%"
+        y="-50%"
+      >
+        <feGaussianBlur
+          in="SourceAlpha"
+          stdDeviation={3}
+        />
+        <feComponentTransfer>
+          <feFuncA
+            slope="0.3"
+            type="linear"
+          />
+        </feComponentTransfer>
+      </filter>
+      <g
+        transform="translate(0,5.5)"
+      >
+        <polyline
+          fill="rgba(33,36,44,0.16)"
+          filter="url(#tooltip-dropshadow-top-0)"
+          points="0,0 12,12 24,0"
+          stroke="rgba(33,36,44,0.32)"
+        />
+      </g>
+      <polyline
+        fill="#ffffff"
+        points="0,0 12,12 24,0"
+        stroke="#ffffff"
+      />
+      <polyline
+        fill="#ffffff"
+        points="0,0 12,12 24,0"
+        stroke="rgba(33,36,44,0.16)"
+      />
+      <polyline
+        points="0,-0.5 24,-0.5"
+        stroke="#ffffff"
+      />
+    </svg>
+  </div>
+  <div
+    className=""
+    style={
+      Object {
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 4,
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "bisque",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "width": 8,
+          "zIndex": 0,
+        }
+      }
+    />
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "green",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "width": 24,
+          "zIndex": 0,
+        }
+      }
+    />
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "bisque",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "width": 8,
+          "zIndex": 0,
+        }
+      }
+    />
+    <div
+      aria-hidden="true"
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "flexGrow": 1,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 11 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "row",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <div
+    className=""
+    style={
+      Object {
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "column",
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "position": "relative",
+        "width": 4,
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "bisque",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 8,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    />
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "green",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 24,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    />
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "bisque",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 8,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    />
+    <div
+      aria-hidden="true"
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "flexGrow": 1,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    />
+  </div>
+  <div
+    className=""
+    data-placement="right"
+    style={
+      Object {
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "column",
+        "height": 40,
+        "left": 1,
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "pointerEvents": "none",
+        "position": "relative",
+        "width": 20,
+        "zIndex": 0,
+      }
+    }
+  >
+    <svg
+      className="arrow_oo4scr"
+      height={24}
+      style={
+        Object {
+          "marginBottom": 8,
+          "marginTop": 8,
+          "paddingLeft": 8,
+        }
+      }
+      width={12}
+    >
+      <filter
+        height="200%"
+        id="tooltip-dropshadow-right-1"
+        width="200%"
+        x="-100%"
+        y="-50%"
+      >
+        <feGaussianBlur
+          in="SourceAlpha"
+          stdDeviation={3}
+        />
+        <feComponentTransfer>
+          <feFuncA
+            slope="0.3"
+            type="linear"
+          />
+        </feComponentTransfer>
+      </filter>
+      <g
+        transform="translate(-1,5.5)"
+      >
+        <polyline
+          fill="rgba(33,36,44,0.16)"
+          filter="url(#tooltip-dropshadow-right-1)"
+          points="12,0 0,12 12,24"
+          stroke="rgba(33,36,44,0.32)"
+        />
+      </g>
+      <polyline
+        fill="#ffffff"
+        points="12,0 0,12 12,24"
+        stroke="#ffffff"
+      />
+      <polyline
+        fill="#ffffff"
+        points="12,0 0,12 12,24"
+        stroke="rgba(33,36,44,0.16)"
+      />
+      <polyline
+        points="12.5,0 12.5,24"
+        stroke="#ffffff"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 12 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <div
+    className=""
+    style={
+      Object {
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 4,
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "bisque",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "width": 8,
+          "zIndex": 0,
+        }
+      }
+    />
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "green",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "width": 24,
+          "zIndex": 0,
+        }
+      }
+    />
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "bisque",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "width": 8,
+          "zIndex": 0,
+        }
+      }
+    />
+    <div
+      aria-hidden="true"
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "flexGrow": 1,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    />
+  </div>
+  <div
+    className=""
+    data-placement="bottom"
+    style={
+      Object {
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "column",
+        "height": 20,
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "pointerEvents": "none",
+        "position": "relative",
+        "top": 1,
+        "width": 40,
+        "zIndex": 0,
+      }
+    }
+  >
+    <svg
+      className="arrow_oo4scr"
+      height={12}
+      style={
+        Object {
+          "marginLeft": 8,
+          "marginRight": 8,
+          "paddingTop": 8,
+        }
+      }
+      width={24}
+    >
+      <polyline
+        fill="#ffffff"
+        points="0, 12 12,0 24,12"
+        stroke="#ffffff"
+      />
+      <polyline
+        fill="#ffffff"
+        points="0, 12 12,0 24,12"
+        stroke="rgba(33,36,44,0.16)"
+      />
+      <polyline
+        points="0, 12.5 24,12.5"
+        stroke="#ffffff"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 13 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "row",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <div
+    className=""
+    data-placement="left"
+    style={
+      Object {
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "column",
+        "height": 40,
+        "left": -1,
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "pointerEvents": "none",
+        "position": "relative",
+        "width": 20,
+        "zIndex": 0,
+      }
+    }
+  >
+    <svg
+      className="arrow_oo4scr"
+      height={24}
+      style={
+        Object {
+          "marginBottom": 8,
+          "marginTop": 8,
+          "paddingRight": 8,
+        }
+      }
+      width={12}
+    >
+      <filter
+        height="200%"
+        id="tooltip-dropshadow-left-2"
+        width="200%"
+        x="0%"
+        y="-50%"
+      >
+        <feGaussianBlur
+          in="SourceAlpha"
+          stdDeviation={3}
+        />
+        <feComponentTransfer>
+          <feFuncA
+            slope="0.3"
+            type="linear"
+          />
+        </feComponentTransfer>
+      </filter>
+      <g
+        transform="translate(1,5.5)"
+      >
+        <polyline
+          fill="rgba(33,36,44,0.16)"
+          filter="url(#tooltip-dropshadow-left-2)"
+          points="0,0 12,12 0,24"
+          stroke="rgba(33,36,44,0.32)"
+        />
+      </g>
+      <polyline
+        fill="#ffffff"
+        points="0,0 12,12 0,24"
+        stroke="#ffffff"
+      />
+      <polyline
+        fill="#ffffff"
+        points="0,0 12,12 0,24"
+        stroke="rgba(33,36,44,0.16)"
+      />
+      <polyline
+        points="-0.5,0 -0.5,24"
+        stroke="#ffffff"
+      />
+    </svg>
+  </div>
+  <div
+    className=""
+    style={
+      Object {
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "column",
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "position": "relative",
+        "width": 4,
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "bisque",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 8,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    />
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "green",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 24,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    />
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "bisque",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 8,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    />
+    <div
+      aria-hidden="true"
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "flexGrow": 1,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 14 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <div
+    className=""
+    data-placement="top"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    role="tooltip"
+    style={
+      Object {
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "column",
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "#ffffff",
+          "border": "solid 1px rgba(33,36,44,0.16)",
+          "borderRadius": 4,
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxShadow": "0 8px 8px 0 rgba(33,36,44,0.08)",
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "justifyContent": "center",
+          "margin": 0,
+          "maxWidth": 472,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    >
+      <div
+        className=""
+        style={
+          Object {
+            "alignItems": "stretch",
+            "borderStyle": "solid",
+            "borderWidth": 0,
+            "boxSizing": "border-box",
+            "display": "flex",
+            "flexDirection": "column",
+            "margin": 0,
+            "minHeight": 0,
+            "minWidth": 0,
+            "padding": "10px 16px",
+            "position": "relative",
+            "zIndex": 0,
+          }
+        }
+      >
+        <span
+          className=""
+          style={
+            Object {
+              "MozOsxFontSmoothing": "grayscale",
+              "WebkitFontSmoothing": "antialiased",
+              "display": "block",
+              "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+              "fontSize": 16,
+              "fontWeight": 400,
+              "lineHeight": "20px",
+            }
+          }
+        >
+          I'm on the top!
+        </span>
+      </div>
+    </div>
+    <div
+      className=""
+      data-placement="top"
+      style={
+        Object {
+          "alignItems": "stretch",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 20,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "pointerEvents": "none",
+          "position": "relative",
+          "top": -1,
+          "width": 40,
+          "zIndex": 0,
+        }
+      }
+    >
+      <svg
+        className="arrow_oo4scr"
+        height={12}
+        style={
+          Object {
+            "marginLeft": 8,
+            "marginRight": 8,
+            "paddingBottom": 8,
+          }
+        }
+        width={24}
+      >
+        <filter
+          height="200%"
+          id="tooltip-dropshadow-top-3"
+          width="200%"
+          x="-50%"
+          y="-50%"
+        >
+          <feGaussianBlur
+            in="SourceAlpha"
+            stdDeviation={3}
+          />
+          <feComponentTransfer>
+            <feFuncA
+              slope="0.3"
+              type="linear"
+            />
+          </feComponentTransfer>
+        </filter>
+        <g
+          transform="translate(0,5.5)"
+        >
+          <polyline
+            fill="rgba(33,36,44,0.16)"
+            filter="url(#tooltip-dropshadow-top-3)"
+            points="0,0 12,12 24,0"
+            stroke="rgba(33,36,44,0.32)"
+          />
+        </g>
+        <polyline
+          fill="#ffffff"
+          points="0,0 12,12 24,0"
+          stroke="#ffffff"
+        />
+        <polyline
+          fill="#ffffff"
+          points="0,0 12,12 24,0"
+          stroke="rgba(33,36,44,0.16)"
+        />
+        <polyline
+          points="0,-0.5 24,-0.5"
+          stroke="#ffffff"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 15 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "flex-start",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <div
+    className=""
+    data-placement="right"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    role="tooltip"
+    style={
+      Object {
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "row-reverse",
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "#ffffff",
+          "border": "solid 1px rgba(33,36,44,0.16)",
+          "borderRadius": 4,
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxShadow": "0 8px 8px 0 rgba(33,36,44,0.08)",
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "justifyContent": "center",
+          "margin": 0,
+          "maxWidth": 472,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    >
+      <div
+        className=""
+        style={
+          Object {
+            "alignItems": "stretch",
+            "borderStyle": "solid",
+            "borderWidth": 0,
+            "boxSizing": "border-box",
+            "display": "flex",
+            "flexDirection": "column",
+            "margin": 0,
+            "minHeight": 0,
+            "minWidth": 0,
+            "padding": "10px 16px",
+            "position": "relative",
+            "zIndex": 0,
+          }
+        }
+      >
+        <span
+          className=""
+          style={
+            Object {
+              "MozOsxFontSmoothing": "grayscale",
+              "WebkitFontSmoothing": "antialiased",
+              "display": "block",
+              "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+              "fontSize": 16,
+              "fontWeight": 400,
+              "lineHeight": "20px",
+            }
+          }
+        >
+          I'm on the right!
+        </span>
+      </div>
+    </div>
+    <div
+      className=""
+      data-placement="right"
+      style={
+        Object {
+          "alignItems": "stretch",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 40,
+          "left": 1,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "pointerEvents": "none",
+          "position": "relative",
+          "width": 20,
+          "zIndex": 0,
+        }
+      }
+    >
+      <svg
+        className="arrow_oo4scr"
+        height={24}
+        style={
+          Object {
+            "marginBottom": 8,
+            "marginTop": 8,
+            "paddingLeft": 8,
+          }
+        }
+        width={12}
+      >
+        <filter
+          height="200%"
+          id="tooltip-dropshadow-right-4"
+          width="200%"
+          x="-100%"
+          y="-50%"
+        >
+          <feGaussianBlur
+            in="SourceAlpha"
+            stdDeviation={3}
+          />
+          <feComponentTransfer>
+            <feFuncA
+              slope="0.3"
+              type="linear"
+            />
+          </feComponentTransfer>
+        </filter>
+        <g
+          transform="translate(-1,5.5)"
+        >
+          <polyline
+            fill="rgba(33,36,44,0.16)"
+            filter="url(#tooltip-dropshadow-right-4)"
+            points="12,0 0,12 12,24"
+            stroke="rgba(33,36,44,0.32)"
+          />
+        </g>
+        <polyline
+          fill="#ffffff"
+          points="12,0 0,12 12,24"
+          stroke="#ffffff"
+        />
+        <polyline
+          fill="#ffffff"
+          points="12,0 0,12 12,24"
+          stroke="rgba(33,36,44,0.16)"
+        />
+        <polyline
+          points="12.5,0 12.5,24"
+          stroke="#ffffff"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 16 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <div
+    className=""
+    data-placement="bottom"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    role="tooltip"
+    style={
+      Object {
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "column-reverse",
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "#ffffff",
+          "border": "solid 1px rgba(33,36,44,0.16)",
+          "borderRadius": 4,
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxShadow": "0 8px 8px 0 rgba(33,36,44,0.08)",
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "justifyContent": "center",
+          "margin": 0,
+          "maxWidth": 472,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    >
+      <div
+        className=""
+        style={
+          Object {
+            "alignItems": "stretch",
+            "borderStyle": "solid",
+            "borderWidth": 0,
+            "boxSizing": "border-box",
+            "display": "flex",
+            "flexDirection": "column",
+            "margin": 0,
+            "minHeight": 0,
+            "minWidth": 0,
+            "padding": "10px 16px",
+            "position": "relative",
+            "zIndex": 0,
+          }
+        }
+      >
+        <span
+          className=""
+          style={
+            Object {
+              "MozOsxFontSmoothing": "grayscale",
+              "WebkitFontSmoothing": "antialiased",
+              "display": "block",
+              "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+              "fontSize": 16,
+              "fontWeight": 400,
+              "lineHeight": "20px",
+            }
+          }
+        >
+          I'm on the bottom!
+        </span>
+      </div>
+    </div>
+    <div
+      className=""
+      data-placement="bottom"
+      style={
+        Object {
+          "alignItems": "stretch",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 20,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "pointerEvents": "none",
+          "position": "relative",
+          "top": 1,
+          "width": 40,
+          "zIndex": 0,
+        }
+      }
+    >
+      <svg
+        className="arrow_oo4scr"
+        height={12}
+        style={
+          Object {
+            "marginLeft": 8,
+            "marginRight": 8,
+            "paddingTop": 8,
+          }
+        }
+        width={24}
+      >
+        <polyline
+          fill="#ffffff"
+          points="0, 12 12,0 24,12"
+          stroke="#ffffff"
+        />
+        <polyline
+          fill="#ffffff"
+          points="0, 12 12,0 24,12"
+          stroke="rgba(33,36,44,0.16)"
+        />
+        <polyline
+          points="0, 12.5 24,12.5"
+          stroke="#ffffff"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 17 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <div
+    className=""
+    data-placement="left"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    role="tooltip"
+    style={
+      Object {
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "row",
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "#ffffff",
+          "border": "solid 1px rgba(33,36,44,0.16)",
+          "borderRadius": 4,
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxShadow": "0 8px 8px 0 rgba(33,36,44,0.08)",
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "justifyContent": "center",
+          "margin": 0,
+          "maxWidth": 472,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    >
+      <div
+        className=""
+        style={
+          Object {
+            "alignItems": "stretch",
+            "borderStyle": "solid",
+            "borderWidth": 0,
+            "boxSizing": "border-box",
+            "display": "flex",
+            "flexDirection": "column",
+            "margin": 0,
+            "minHeight": 0,
+            "minWidth": 0,
+            "padding": "10px 16px",
+            "position": "relative",
+            "zIndex": 0,
+          }
+        }
+      >
+        <span
+          className=""
+          style={
+            Object {
+              "MozOsxFontSmoothing": "grayscale",
+              "WebkitFontSmoothing": "antialiased",
+              "display": "block",
+              "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+              "fontSize": 16,
+              "fontWeight": 400,
+              "lineHeight": "20px",
+            }
+          }
+        >
+          I'm on the left!
+        </span>
+      </div>
+    </div>
+    <div
+      className=""
+      data-placement="left"
+      style={
+        Object {
+          "alignItems": "stretch",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 40,
+          "left": -1,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "pointerEvents": "none",
+          "position": "relative",
+          "width": 20,
+          "zIndex": 0,
+        }
+      }
+    >
+      <svg
+        className="arrow_oo4scr"
+        height={24}
+        style={
+          Object {
+            "marginBottom": 8,
+            "marginTop": 8,
+            "paddingRight": 8,
+          }
+        }
+        width={12}
+      >
+        <filter
+          height="200%"
+          id="tooltip-dropshadow-left-5"
+          width="200%"
+          x="0%"
+          y="-50%"
+        >
+          <feGaussianBlur
+            in="SourceAlpha"
+            stdDeviation={3}
+          />
+          <feComponentTransfer>
+            <feFuncA
+              slope="0.3"
+              type="linear"
+            />
+          </feComponentTransfer>
+        </filter>
+        <g
+          transform="translate(1,5.5)"
+        >
+          <polyline
+            fill="rgba(33,36,44,0.16)"
+            filter="url(#tooltip-dropshadow-left-5)"
+            points="0,0 12,12 0,24"
+            stroke="rgba(33,36,44,0.32)"
+          />
+        </g>
+        <polyline
+          fill="#ffffff"
+          points="0,0 12,12 0,24"
+          stroke="#ffffff"
+        />
+        <polyline
+          fill="#ffffff"
+          points="0,0 12,12 0,24"
+          stroke="rgba(33,36,44,0.16)"
+        />
+        <polyline
+          points="-0.5,0 -0.5,24"
+          stroke="#ffffff"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 18 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <div
+    className=""
+    data-placement="bottom"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    role="tooltip"
+    style={
+      Object {
+        "alignItems": "stretch",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "display": "flex",
+        "flexDirection": "column-reverse",
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "padding": 0,
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "#ffffff",
+          "border": "solid 1px rgba(33,36,44,0.16)",
+          "borderRadius": 4,
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxShadow": "0 8px 8px 0 rgba(33,36,44,0.08)",
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "justifyContent": "center",
+          "margin": 0,
+          "maxWidth": 472,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    >
+      <div
+        className=""
+        style={
+          Object {
+            "alignItems": "stretch",
+            "borderStyle": "solid",
+            "borderWidth": 0,
+            "boxSizing": "border-box",
+            "display": "flex",
+            "flexDirection": "column",
+            "margin": 0,
+            "minHeight": 0,
+            "minWidth": 0,
+            "padding": "10px 16px",
+            "position": "relative",
+            "zIndex": 0,
+          }
+        }
+      >
+        <span
+          className=""
+          style={
+            Object {
+              "MozOsxFontSmoothing": "grayscale",
+              "WebkitFontSmoothing": "antialiased",
+              "display": "block",
+              "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+              "fontSize": 16,
+              "fontWeight": 400,
+              "lineHeight": "20px",
+            }
+          }
+        >
+          I'm on the bottom with a tail 50px in!
+        </span>
+      </div>
+    </div>
+    <div
+      className=""
+      data-placement="bottom"
+      style={
+        Object {
+          "alignItems": "stretch",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 20,
+          "left": 50,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "pointerEvents": "none",
+          "position": "relative",
+          "top": 1,
+          "width": 40,
+          "zIndex": 0,
+        }
+      }
+    >
+      <svg
+        className="arrow_oo4scr"
+        height={12}
+        style={
+          Object {
+            "marginLeft": 8,
+            "marginRight": 8,
+            "paddingTop": 8,
+          }
+        }
+        width={24}
+      >
+        <polyline
+          fill="#ffffff"
+          points="0, 12 12,0 24,12"
+          stroke="#ffffff"
+        />
+        <polyline
+          fill="#ffffff"
+          points="0, 12 12,0 24,12"
+          stroke="rgba(33,36,44,0.16)"
+        />
+        <polyline
+          points="0, 12.5 24,12.5"
+          stroke="#ffffff"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`wonder-blocks-tooltip example 19 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "stretch",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "column",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <div
+    className=""
+    data-placement="top"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    role="tooltip"
+    style={
+      Object {
+        "alignItems": "stretch",
+        "backgroundColor": "transparent",
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "boxSizing": "border-box",
+        "color": "transparent",
+        "display": "flex",
+        "flexDirection": "column",
+        "margin": 0,
+        "minHeight": 0,
+        "minWidth": 0,
+        "opacity": 0,
+        "padding": 0,
+        "pointerEvents": "none",
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      className=""
+      style={
+        Object {
+          "alignItems": "stretch",
+          "backgroundColor": "#ffffff",
+          "border": "solid 1px rgba(33,36,44,0.16)",
+          "borderRadius": 4,
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxShadow": "0 8px 8px 0 rgba(33,36,44,0.08)",
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "justifyContent": "center",
+          "margin": 0,
+          "maxWidth": 472,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "position": "relative",
+          "zIndex": 0,
+        }
+      }
+    >
+      <div
+        className=""
+        style={
+          Object {
+            "alignItems": "stretch",
+            "borderStyle": "solid",
+            "borderWidth": 0,
+            "boxSizing": "border-box",
+            "display": "flex",
+            "flexDirection": "column",
+            "margin": 0,
+            "minHeight": 0,
+            "minWidth": 0,
+            "padding": "10px 16px",
+            "position": "relative",
+            "zIndex": 0,
+          }
+        }
+      >
+        <span
+          className=""
+          style={
+            Object {
+              "MozOsxFontSmoothing": "grayscale",
+              "WebkitFontSmoothing": "antialiased",
+              "display": "block",
+              "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+              "fontSize": 16,
+              "fontWeight": 400,
+              "lineHeight": "20px",
+            }
+          }
+        >
+          I'm hidden. So hidden. Shhhhh!
+        </span>
+      </div>
+    </div>
+    <div
+      className=""
+      data-placement="top"
+      style={
+        Object {
+          "alignItems": "stretch",
+          "borderStyle": "solid",
+          "borderWidth": 0,
+          "boxSizing": "border-box",
+          "display": "flex",
+          "flexDirection": "column",
+          "height": 20,
+          "margin": 0,
+          "minHeight": 0,
+          "minWidth": 0,
+          "padding": 0,
+          "pointerEvents": "none",
+          "position": "relative",
+          "top": -1,
+          "width": 40,
+          "zIndex": 0,
+        }
+      }
+    >
+      <svg
+        className="arrow_oo4scr"
+        height={12}
+        style={
+          Object {
+            "marginLeft": 8,
+            "marginRight": 8,
+            "paddingBottom": 8,
+          }
+        }
+        width={24}
+      >
+        <filter
+          height="200%"
+          id="tooltip-dropshadow-top-6"
+          width="200%"
+          x="-50%"
+          y="-50%"
+        >
+          <feGaussianBlur
+            in="SourceAlpha"
+            stdDeviation={3}
+          />
+          <feComponentTransfer>
+            <feFuncA
+              slope="0.3"
+              type="linear"
+            />
+          </feComponentTransfer>
+        </filter>
+        <g
+          transform="translate(0,5.5)"
+        >
+          <polyline
+            fill="rgba(33,36,44,0.16)"
+            filter="url(#tooltip-dropshadow-top-6)"
+            points="0,0 12,12 24,0"
+            stroke="rgba(33,36,44,0.32)"
+          />
+        </g>
+        <polyline
+          fill="#ffffff"
+          points="0,0 12,12 24,0"
+          stroke="#ffffff"
+        />
+        <polyline
+          fill="#ffffff"
+          points="0,0 12,12 24,0"
+          stroke="rgba(33,36,44,0.16)"
+        />
+        <polyline
+          points="0,-0.5 24,-0.5"
+          stroke="#ffffff"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;