MUI：如何在选定文本上显示工具提示组件？

Posted 2023-02-21

【中文标题】MUI：如何在选定文本上显示工具提示组件？

【英文标题】：MUI: how to show tooltip component over selected text?

【发布时间】：2019-07-01 23:27:48

【问题描述】：

喜欢媒体：

来自 matetial-ui react 框架的工具提示。

一些想法：

用<span> 包裹选定的文本并将该元素用作参考节点 工具提示（我猜太复杂了） 创建不带子的工具提示并指定 基于所选文本的绝对位置

还有其他想法吗？

【参考方案1】：

最简单的：https://www.w3schools.com/css/css_tooltip.asp

更有效：https://chrisbracco.com/a-simple-css-tooltip/

:)

【参考方案2】：

Medium.com 使用 popper.js。我通过在 Medium 的 html 中搜索标签参数发现了这一点。

<div class="bz fx mc yw"
     style=
"position: absolute; inset: auto auto 0px 0px; transform: translate(692px, 1233px);"
     data-popper-reference-hidden="false"
     data-popper-escaped="false"
     data-popper-placement="top">

https://popper.js.org/

如果你滚动，它会重新定位弹出窗口，我检查过。