鼠标悬停弹出语音气泡

Question

我是javascript/css的新手，我想制作一个类似于此处带下划线的单词上显示的鼠标悬停弹出窗口的版本：http://st.japantimes.co.jp/essay/?p=ey20141219我可以看到使用的代码，但是当我编辑自己的项目代码时，我不确定在哪里/如何添加我自己的语音气泡图像。

下面是引用页面上使用的代码示例：

.HTML：

<a style="cursor:pointer;" onclick="showChuPopup(event,'<b>’Twas</b><br />It was の省略');return false;" onmouseover="showChuPopup(event,'<b>’Twas</b><br />It was の省略');" onmouseout="endChuPopup();">’Twas</a>

Javascript：

function showChuPopup(e,text){
if(document.all)e = event;
var obj = document.getElementById('chu_popup');
var obj2 = document.getElementById('chu_popup_text');
obj2.innerHTML = text;
obj.style.display = 'block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);/*
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;*/
var leftPos = e.clientX - 100;
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos + 'px';
obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';} function endChuPopup() {
document.getElementById('chu_popup').style.display = 'none';} function touchHandler(e){
document.getElementById('chu_popup').style.display = 'none';}

感谢您的任何帮助或想法。

Answer 1

有几种方法可以解决这个问题，但我会推荐两个选项并提供指向这两个选项的链接！

---

首先，查看此问题的答案，看看这是否是您想要的：

jQuery 弹出气泡/工具提示

---

其次，你有没有想过只在CSS中使用工具提示？它们根本不难实现，您绝对可以将数据绑定到它们。

(无耻地偷来的：https://www.w3schools.com/css/css_tooltip.asp，如果你是初学者，我建议你在这里闲逛，也看看 Bootstrap！

<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>