添加工具提示 - Javascript 没有 jquery

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" 的值，然后如果你用鼠标悬停这个值，它会显示这个 Force 值的来源

例如：

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/

添加工具提示 - Javascript 没有 jquery

Add a Tooltip - Javascript without jquery

javascript

tooltip