编写一个脚本在我学校的注册网站上运行。我已经修改了页面,以便教授的名字链接到他们各自的页面就好了。
我现在想在悬停时创建一个(我认为这个名字是正确的)工具提示,显示 4 个类似的东西。 (我可以做到 3,不需要辣椒但很有趣)。
我对学习这一切完全陌生。我显然没有直接访问页面的权限,我正在使用 JS 脚本进行我所做的任何修改。
这是我可以用 vanilla JS 做的事情吗?这是一个 chrome 扩展,工具提示应该填充来自 ajax 请求的结果。在运行时填充它们非常重要,而不是硬编码到 html/css 中。我想我可以将框的 CSS 弹出到 chrome 扩展的文件中并从那里引用它。
这是我能做的吗?使用 ajax 结果来填充工具提示?我也可以底部/右对齐的图像?它会不会像我草拟的那样看起来很糟糕? (完全接受建议!)
只是想确保我能真正完成这件事,也许如果有人有方向,他们想指出我的方向,那就太棒了。也非常感谢任何建议。
最佳答案
是的,可以使用 vanilla JS 而不必使用 css(尽管你需要内联样式),或者,你可以将 css 与它混合;这是你的选择。
- 您要做的是在 教授(或任何你想显示工具提示的东西),让 将其称为“工具提示目标”。
- 在 onmouseover 事件处理程序/函数中,启动您想要的任何 ajax 请求并编写工具提示框的 html 字符串。
- 使用 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);
关于带有运行时数据的 JavaScript 工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45157767/