javascript - React-Tooltip 剪辑
问题描述
所以我想弄清楚如何在这里解决我的困境。
所以我面临的问题是,如果我将 React-tooltip 放在 List 元素中,它将被剪裁。如果我将 React-Toolip 放在底部,它没有任何效果(这是合乎逻辑的,因为它不知道地图之外的索引。所以我有点卡在这里试图弄清楚如何防止剪辑。我有尝试将 z-index 设置为无济于事。我觉得 React-Tooltip 的位置和/或与样式相结合可以解决这个问题。我觉得答案是正确的并不复杂,但我无法让它配合。提前致谢。
代码如下所示:
const styles = {
listContainer: {
maxHeight: this.props.listMaxHeight ? this.props.listMaxHeight : '30vh',
overflowY: 'auto',
border: '.05vmin solid',
borderColor: fullWhite,
},
};
const commentCard = () => {
if (typeof(data.md5hash) === 'string' && data.md5hash.length > 0) {
return (
<div>
<div style={styles.listContainer}>
<List>
{comments.map((item, index) => (
<ListItem
id={index}
key={index}
leftAvatar={ <Avatar src={item.avatar} />}
rightIconButton={
<IconMenu
disableGutters={true}
iconButtonElement={
<IconButton>
<MoreVertIcon color={grey400} />
</IconButton>
}>
<MenuItem>
<IconButton
disabled={this.checkUserRights(index)}
onClick={() => this.editComment(index)}
data-tip='Edit'
data-for={`sf${index}`}>
<FontIcon className="far fa-edit" />
</IconButton>
</MenuItem>
<MenuItem>
<IconButton
disabled={this.checkUserRights(index)}
onClick={() => this.deleteComment(index)}
data-tip='Delete'
data-for={`sf${index}`}>
<FontIcon className="far fa-trash-alt" />
</IconButton>
</MenuItem>
<ReactTooltip
id={`sf${index}`}
place='left'
/>
</IconMenu>
}
primaryText={
// not relevant
}
secondaryText={
// not relevant
}
/>
))}
</List>
</div>
<div style={styles.actionsContainer}>
// this is a container for the comments text area and buttons
</div>
</div>);
} else {
return null;
}
};
编辑:
好的,所以我有点看到是什么阻止了它,但不知道解决方法。
这两个元素有overflowY:auto,但我需要overflow:visible。我不知道如何改变这一点。
解决方案
Provide a className inside,
<ReactTooltip
className="reacttooltip"
id={`sf${index}`}
place='left'
/>
And in your css file, or what ever styling methods(sass or styled components), you can add your style for this class,
.reacttooltip {
overflow: visible;
}
推荐阅读
- android - Live Data Observer On 按钮 屏幕旋转时单击
- flutter - 如何简化此辅助功能?
- debugging - BrowserSync 在 Laradock 中不起作用(使用 laravel-mix)
- lua - 获取表中值的键及其内部的表
- amazon-web-services - Apex 域重定向到 www Route 53
- javascript - 是否可以在自定义元素中独立于 innerHTML 操作显示的 DOM?
- python - NameError:名称“page_num”未定义
- ios - 可以在 Swift 中将泛型子类与函数构建器一起使用吗?
- javascript - 我无法将 url 添加到 js 函数
- java - 如果 Liquibase bean 由于数据库连接失败而失败,如何启动微服务