All files / src/tooltip/_example TooltipExample.jsx

75% Statements 3/4
100% Branches 0/0
50% Functions 1/2
75% Lines 3/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37              1x   1x           1x                                          
import React, { Fragment } from "react";
import { Tooltip } from "@tencent/tea-component/lib/tooltip";
import { Text } from "@tencent/tea-component/lib/text";
import { Button } from "@tencent/tea-component/lib/button";
import { Modal } from "@tencent/tea-component/lib/modal";
 
export default function TooltipExample() {
  const longContent = "张三,李四,流五,陈六,赵七,王八,李九";
  const tooltipContent = (
    <Tooltip title={longContent}>
      <Text verticalAlign="middle" style={{ maxWidth: 100 }} overflow>
        {longContent}
      </Text>
    </Tooltip>
  );
  return (
    <Fragment>
      <section>
        <Text verticalAlign="middle" theme="label">
          联系人:
        </Text>
        {tooltipContent}
        <Button
          onClick={() =>
            Modal.success({
              message: "查看联系人",
              description: tooltipContent,
            })
          }
        >
          在对话框中查看
        </Button>
      </section>
    </Fragment>
  );
}