javascript - 添加工具提示 - 没有 jquery 的 Javascript

Question

我想添加一个工具提示，在不使用 jquery 的情况下组合 javascript 值

这是我的 div :

<div tooltip="Should be forceBase + modifyForce" tooltip-persistent class="StatFormat" id = "Force"></div>

CSS:

[tooltip]:before {
    /* needed - do not touch */
    content: attr(tooltip);
    position: absolute;
    opacity: 0;

    /* customizable */
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;    
}

[tooltip]:hover:before {
    /* needed - do not touch */
    opacity: 1;

    /* customizable */
    background: yellow;
    margin-top: -50px;
    margin-left: 20px;    
}

[tooltip]:not([tooltip-persistent]):before {
    pointer-events: none;
}

和 Javascript 值:

var modifyForce = 0;
var forceBase = 15;
var Force = (forceBase + modifyForce);

document.getElementById("Force").innerHTML = Force;
document.getElementById("forceBase").innerHTML = forceBase;
document.getElementById("modifyForce").innerHTML = modifyForce;

我最后的目标是显示“Force”的值，然后如果您用鼠标悬停该值，它会显示该力值的来源

例如:

力量:20(如果您将鼠标悬停在“20”上，则会出现一个工具提示并显示(15 + 5)

我在 jquery 中找到了方法，但由于特定原因我不想使用 jquery。

你有什么想法吗？谢谢:)

Answer 1

这就是你所追求的吗？

var modifyForce = 0;
var forceBase = 15;
var Force = (forceBase + modifyForce);
var el = document.getElementById("Force");

el.innerHTML = Force;
el.setAttribute('tooltip', forceBase + ' + ' + modifyForce);

fiddle -http://jsfiddle.net/40chzfh6/