带有运行时数据的 JavaScript 工具提示？

Question

编写一个脚本在我学校的注册网站上运行。我已经修改了页面，以便教授的名字链接到他们各自的页面就好了。

我现在想在悬停时创建一个(我认为这个名字是正确的)工具提示，显示 4 个类似的东西。 (我可以做到 3，不需要辣椒但很有趣)。

我对学习这一切完全陌生。我显然没有直接访问页面的权限，我正在使用 JS 脚本进行我所做的任何修改。

这是我可以用 vanilla JS 做的事情吗？这是一个 chrome 扩展，工具提示应该填充来自 ajax 请求的结果。在运行时填充它们非常重要，而不是硬编码到 html/css 中。我想我可以将框的 CSS 弹出到 chrome 扩展的文件中并从那里引用它。

这是我能做的吗？使用 ajax 结果来填充工具提示？我也可以底部/右对齐的图像？它会不会像我草拟的那样看起来很糟糕？ (完全接受建议!)

只是想确保我能真正完成这件事，也许如果有人有方向，他们想指出我的方向，那就太棒了。也非常感谢任何建议。

Answer 1

是的，可以使用 vanilla JS 而不必使用 css(尽管你需要内联样式)，或者，你可以将 css 与它混合；这是你的选择。

1. 您要做的是在教授(或任何你想显示工具提示的东西)，让将其称为“工具提示目标”。
2. 在 onmouseover 事件处理程序/函数中，启动您想要的任何 ajax 请求并编写工具提示框的 html 字符串。
3. 使用 getBoundingClientRect() 找到“工具提示目标”的位置(参见第 1 步)，并使用 fixed 在该位置显示工具提示或绝对定位 [通过使用 appendChild()]。

[编辑]

例子:外部范围:

var currentTooltip = null;

鼠标悬停

//Use ajax calls to fetch quality and difficulty
var root = document.createElement("div"); //This is the tooltip's root div
html = "<p> Overall Quality: " + quality + "</p>";
html += "<p> Difficulty: " + difficulty + "</p>";
root.innerHTML = html; //Add content to the tooltip
var bounds = tooltipTarget.getBoundingClientRect(); //Get bounds of the tooltip target
root.style.position = "absolute";
root.style.left = bounds.left + "px";
root.style.top = bounds.top + "px";
root.style.zIndex = "65535"; //Set max z-index so that it appears at the top
currentTooltip = root;
document.body.appendChild(root); //Displays the tooltip

鼠标移出:

if(currentTooltip != null) document.body.removeChild(currentTooltip);