鼠标悬停弹出对话框

Question

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

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

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 Popup Bubble/Tooltip

其次，你有没有想过在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>

鼠标悬停弹出对话框

Mouseover popup speech bubble

javascript

html

css

popup

mouseover