隱藏一個工具提示

Question

我有以下工具提示組件：

export interface ITooltipProps {
    Title: string;
    Visibility: boolean;
    Items: any[];
}

export const Tooltip: React.StatelessComponent<ITooltipProps> = (props) => {
    if (!props.Visibility) {
        return null;
    }

    return (
        <div className={css.toolTip} role="tooltip" style={{margin: props.Margin}} aria-hidden={props.Visibility}>
            <h1 className={css.toolTipHeader}>{props.Title}</h1>
            <ul className={css.itemList}>
                {props.Items.map((o) => {
                    return (
                        <li key={o.ID}>{o.Data}</li>
                    );
                })}
            </ul>
        </div>
    );
};

這是從另一個組件調用的，例如：

<div onMouseOver={this.showtooltip} onMouseLeave={this.hidetooltip}>
    <Tooltip Title={strings.SecurityGroup_Label_ManagementOffices} ManagementOffices={offices} Visibility={this.state.IsToolTipVisible}  />
</div>

private showtooltip = () => {
    this.setState({ IsToolTipVisible: true });
}

private hidetooltip = () => {
    this.setState({ IsToolTipVisible: false });
}

我面臨的問題是，由於存在一個IsToolTipVisible ，如果組件中有多個工具提示，它將一次顯示/隱藏所有工具提示。 我該如何編碼，使其僅顯示懸停的項目？

Answer 1

這可以添加注釋，但由於它很大，可以添加為答案。

我現在可以想到兩種使用您的唯一ID的方式（期望它是我們設置為工具提示的對象中的ID，而不是html id屬性）

1. 您可以使用uniqueid，而不是保存istooltipvisible的布爾值，而是保存當前可見的布爾值。 在使用Boolean檢查istooltipvisible的地方，使用諸如eachuniqueid === currentvisibleid之類的方法。使用此方法，一次可能只有一個工具提示，這可能是一個問題。

2. 您可以為每個工具提示保存一個istooltipvisible屬性，並且只要它可見，就將其設置為true，並在關閉時將其設置為false。 這樣，您還可以管理多個工具提示。