Component: Tooltips

src/components/calcite-popover/calcite-popover.tsx

@@ -40,7 +40,7 @@ export class CalcitePopover {
   }
 
   /**
-   * Determines where the element will be positioned.
+   * Determines where the component will be positioned relative to the referenceElement.
    * horizontal: Positioned to the left or right of the referenceElement.
    * vertical: Positioned above or below the referenceElement.
    */

src/components/calcite-popover/readme.md

@@ -5,13 +5,13 @@
 
 ## Properties
 
-| Property           | Attribute           | Description                                                                                                                                                                     | Type                         | Default        |
-| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- |
-| `open`             | `open`              | Display and position the component.                                                                                                                                             | `boolean`                    | `false`        |
-| `placement`        | `placement`         | Determines where the element will be positioned. horizontal: Positioned to the left or right of the referenceElement. vertical: Positioned above or below the referenceElement. | `"horizontal" \| "vertical"` | `"horizontal"` |
-| `referenceElement` | `reference-element` | Reference HTMLElement used to position this component according to the placement property.                                                                                      | `HTMLElement \| string`      | `undefined`    |
-| `xOffset`          | `x-offset`          | Offset the position of the popover in the horizontal direction.                                                                                                                 | `number`                     | `0`            |
-| `yOffset`          | `y-offset`          | Offset the position of the popover in the vertical direction.                                                                                                                   | `number`                     | `0`            |
+| Property           | Attribute           | Description                                                                                                                                                                                                        | Type                         | Default        |
+| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------- |
+| `open`             | `open`              | Display and position the component.                                                                                                                                                                                | `boolean`                    | `false`        |
+| `placement`        | `placement`         | Determines where the component will be positioned relative to the referenceElement. horizontal: Positioned to the left or right of the referenceElement. vertical: Positioned above or below the referenceElement. | `"horizontal" \| "vertical"` | `"horizontal"` |
+| `referenceElement` | `reference-element` | Reference HTMLElement used to position this component according to the placement property.                                                                                                                         | `HTMLElement \| string`      | `undefined`    |
+| `xOffset`          | `x-offset`          | Offset the position of the popover in the horizontal direction.                                                                                                                                                    | `number`                     | `0`            |
+| `yOffset`          | `y-offset`          | Offset the position of the popover in the vertical direction.                                                                                                                                                      | `number`                     | `0`            |
 
 
 ## Methods

src/components/calcite-tooltip/calcite-tooltip.e2e.ts

@@ -0,0 +1,195 @@
+import { newE2EPage } from "@stencil/core/testing";
+
+import { defaults, hidden, renders } from "../../tests/commonTests";
+
+import { CSS } from "./resources";
+
+describe("calcite-tooltip", () => {
+  it("renders", async () => renders("calcite-tooltip"));
+
+  it("honors hidden attribute", async () => hidden("calcite-tooltip"));
+
+  it("has property defaults", async () =>
+    defaults("calcite-tooltip", [
+      {
+        propertyName: "image",
+        defaultValue: undefined
+      },
+      {
+        propertyName: "imageLabel",
+        defaultValue: undefined
+      },
+      {
+        propertyName: "interaction",
+        defaultValue: "hover"
+      },
+      {
+        propertyName: "open",
+        defaultValue: false
+      },
+      {
+        propertyName: "placement",
+        defaultValue: "auto"
+      },
+      {
+        propertyName: "referenceElement",
+        defaultValue: undefined
+      },
+      {
+        propertyName: "text",
+        defaultValue: undefined
+      },
+      {
+        propertyName: "theme",
+        defaultValue: "light"
+      }
+    ]));
+
+  it("popover positions when referenceElement is set", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(
+      `<calcite-tooltip open></calcite-tooltip><div>referenceElement</div>`
+    );
+
+    const element = await page.find("calcite-tooltip");
+
+    await page.$eval("calcite-tooltip", (elm: any) => {
+      const referenceElement = document.createElement("div");
+      document.body.appendChild(referenceElement);
+      elm.referenceElement = referenceElement;
+    });
+
+    await page.waitForChanges();
+
+    const computedStyle = await element.getComputedStyle();
+
+    expect(computedStyle.transform).not.toBe("none");
+  });
+
+  it("open popover should be visible", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(
+      `<calcite-tooltip></calcite-tooltip><div>referenceElement</div>`
+    );
+
+    const element = await page.find("calcite-tooltip");
+
+    await page.$eval("calcite-tooltip", (elm: any) => {
+      const referenceElement = document.createElement("div");
+      document.body.appendChild(referenceElement);
+      elm.referenceElement = referenceElement;
+    });
+
+    await page.waitForChanges();
+
+    const container = await page.find(`calcite-tooltip >>> .${CSS.container}`);
+
+    expect(await container.isVisible()).toBe(false);
+
+    element.setProperty("open", true);
+
+    await page.waitForChanges();
+
+    expect(await container.isVisible()).toBe(true);
+  });
+
+  it("should accept referenceElement as string id", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(
+      `<calcite-tooltip reference-element="ref" open>content</calcite-tooltip><div id="ref">referenceElement</div>`
+    );
+
+    await page.waitForChanges();
+
+    const container = await page.find(`calcite-tooltip >>> .${CSS.container}`);
+
+    await page.waitForChanges();
+
+    expect(await container.isVisible()).toBe(true);
+
+    const element = await page.find("calcite-tooltip");
+
+    const computedStyle = await element.getComputedStyle();
+
+    expect(computedStyle.transform).not.toBe("none");
+  });
+
+  it("should honor hover interaction", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(
+      `<calcite-tooltip reference-element="ref" interaction="hover">content</calcite-tooltip><div id="ref">referenceElement</div>`
+    );
+
+    await page.waitForChanges();
+
+    const container = await page.find(`calcite-tooltip >>> .${CSS.container}`);
+
+    expect(await container.isVisible()).toBe(false);
+
+    const ref = await page.find("#ref");
+
+    await ref.hover();
+
+    expect(await container.isVisible()).toBe(true);
+  });
+
+  it("should honor click interaction", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(
+      `<calcite-tooltip reference-element="ref" interaction="click">content</calcite-tooltip><div id="ref">referenceElement</div>`
+    );
+
+    await page.waitForChanges();
+
+    const container = await page.find(`calcite-tooltip >>> .${CSS.container}`);
+
+    expect(await container.isVisible()).toBe(false);
+
+    const ref = await page.find("#ref");
+
+    await ref.click();
+
+    expect(await container.isVisible()).toBe(true);
+
+    await ref.click();
+
+    expect(await container.isVisible()).toBe(false);
+  });
+
+  it("should honor image & imageLabel", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(
+      `<calcite-tooltip reference-element="ref" image="http://placekitten.com/200/300" image-label="hi" open>content</calcite-tooltip><div id="ref">referenceElement</div>`
+    );
+
+    await page.waitForChanges();
+
+    const image = await page.find(`calcite-tooltip >>> .${CSS.image}`);
+
+    expect(await image.isVisible()).toBe(true);
+
+    expect(image.getAttribute("alt")).toBe("hi");
+  });
+
+  it("should honor text", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(
+      `<calcite-tooltip reference-element="ref" text="hi" open>content</calcite-tooltip><div id="ref">referenceElement</div>`
+    );
+
+    await page.waitForChanges();
+
+    const content = await page.find(`calcite-tooltip >>> .${CSS.content}`);
+
+    expect(await content.isVisible()).toBe(true);
+
+    expect(content.textContent).toBe("hi");
+  });
+});

src/components/calcite-tooltip/calcite-tooltip.scss

@@ -0,0 +1,96 @@
+:host {
+  display: block;
+  position: absolute;
+  z-index: 999;
+  top: -999999px;
+  left: -999999px;
+}
+
+.container {
+  visibility: hidden;
+  background-color: #fff;
+  padding: 5px 10px;
+  box-shadow: $shadow-2;
+  border-radius: 2px;
+  max-width: 200px;
+  max-height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+.container--open {
+  visibility: visible;
+}
+
+.image {
+  flex: 1;
+  overflow: hidden;
+}
+
+.content {
+  position: relative;
+  flex: 1;
+}
+
+.close-button {
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  right: 0;
+  background: transparent;
+  padding: 5px;
+  border: none;
+  display: block;
+}
+
+.arrow {
+  display: block;
+}
+
+:host([x-placement="top"]) .arrow {
+  display: block;
+}
+
+:host([x-placement="top-end"]) .arrow {
+  display: block;
+}
+
+:host([x-placement="right"]) .arrow {
+  display: block;
+}
+
+:host([x-placement="right-start"]) .arrow {
+  display: block;
+}
+
+:host([x-placement="right-end"]) .arrow {
+  display: block;
+}
+
+:host([x-placement="bottom-end"]) .arrow {
+  display: block;
+}
+
+:host([x-placement="right-end"]) .arrow {
+  display: block;
+}
+
+:host([x-placement="bottom"]) .arrow {
+  display: block;
+}
+
+:host([x-placement="bottom-start"]) .arrow {
+  display: block;
+}
+
+:host([x-placement="left-end"]) .arrow {
+  display: block;
+}
+
+:host([x-placement="left"]) .arrow {
+  display: block;
+}
+
+:host([x-placement="left-start"]) .arrow {
+  display: block;
+}