隐藏一个工具提示

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，如果组件中有多个工具提示，它将立即显示/隐藏所有工具提示。我该如何编码，使其仅显示悬停的项目？