import { Component, h, Host } from '@stencil/core';
const demo1 = `<p>
Can be used on a
<dvn-tooltip
  content="However, a picture is worth a million words."
>
  <b>word</b>
</dvn-tooltip>
in a paragraph.
</p>`;
const demo2 = `<dvn-tooltip
  content="Or on an element."
>
  <dvn-icon-button
    icon-name="uil uil-favorite"
    tint="secondary"
  />
</dvn-tooltip>`;
const demo3 = `<dvn-tooltip
  content="Setting a width makes it have multiple lines. Otherwise it stays single line."
  width="200px"
>
  <dvn-icon-button
    icon-name="uil uil-favorite"
    tint="secondary"
  />
</dvn-tooltip>`;
export class ShowcaseTooltip {
  render() {
    return (h(Host, null,
      h("dvn-card", { leaned: true, clip: false },
        h("div", { class: "p-3" },
          h("dvn-tooltip", { content: "On the left.", placement: "left", offset: "0px" },
            h("dvn-icon-button", { view: "outline", "icon-name": "uil uil-arrow-left" })),
          h("dvn-tooltip", { content: "On the top.", placement: "top", offset: "0px" },
            h("dvn-icon-button", { view: "outline", "icon-name": "uil uil-arrow-up" })),
          h("dvn-tooltip", { content: "On the bottom.", placement: "bottom", offset: "0px" },
            h("dvn-icon-button", { view: "outline", "icon-name": "uil uil-arrow-down" })),
          h("dvn-tooltip", { content: "On the right.", placement: "right", offset: "0px" },
            h("dvn-icon-button", { view: "outline", "icon-name": "uil uil-arrow-right" }))),
        h("div", { class: "d-flex" },
          h("dvn-component-demo", { domString: demo1 }),
          h("dvn-component-demo", { domString: demo2 })),
        h("div", { class: "d-flex mt-3" },
          h("dvn-component-demo", { domString: demo3 })))));
  }
  static get is() { return "showcase-tooltip"; }
}
