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 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>

鼠标悬停弹出讲话泡泡

1 个答案: