如何在Twilio的徽标上添加工具提示

Question

我试图在用户将鼠标悬停在徽标上时显示工具提示。我不确定在Twilio中是否有可能实现这一点。

flex.MainHeader.defaultProps.logoUrl = `https://${serviceBaseUrl}/assets/MyApp.png`;

Answer 1

实现这一点的一种方法是使用onMouseOver和onMouseOut事件处理程序来切换当徽标悬停在上面时工具提示的可见性。您可以将这些事件处理程序添加到表示徽标的img元素中，并使用它们设置呈现工具提示的组件的状态。该状态将包含一个布尔值，该值指示工具提示是否应该可见，组件的呈现方法将使用该值有条件地呈现工具提示。

constructor(props) {
super(props);
this.state = { showTooltip: false };
}

render() {
return (
<div>
<img
src={flex.MainHeader.defaultProps.logoUrl}
onMouseOver={() => this.setState({ showTooltip: true })}
onMouseOut={() => this.setState({ showTooltip: false })}
/>
{this.state.showTooltip && <div>This is the tooltip</div>}
</div>
);
}
}

这样，只有当用户将鼠标悬停在徽标上时，工具提示才会显示。