import { h } from "vue";
import { ElButton, ElPopover } from "element-plus";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";

export function createTooltip(left: string, reference: string, width = 200) {
  return h(
    "div",
    {
      style: {
        display: "flex",
      }
    },
    {
      default: () => [
        h(
          ElPopover,
          {
            placement: "top",
            content: reference,
            width
          },
          {
            reference: () =>
              h(ElButton, {
                link: true,
                icon: useRenderIcon("information-line")
              })
          }
        ),
        h("span", null, left)
      ]
    }
  );
}
