import React from "react";
import { Tooltip, Text, Button, Modal } from "@tencent/tea-component";

export default function TooltipExample() {
  const longContent = "张三，李四，流五，陈六，赵七，王八，李九";
  const tooltipContent = (
    <Tooltip title={longContent}>
      <Text verticalAlign="middle" style={{ maxWidth: 100 }} overflow>
        {longContent}
      </Text>
    </Tooltip>
  );
  return (
    <>
      <section>
        <Text verticalAlign="middle" theme="label">
          联系人：
        </Text>
        {tooltipContent}
        <Button
          onClick={() =>
            Modal.success({
              message: "查看联系人",
              description: tooltipContent,
            })
          }
        >
          在对话框中查看
        </Button>
      </section>
    </>
  );
}