Add a Tooltip - Javascript without jquery

Question

I would like to add a tooltip that combines javascript values without using jquery

This is my 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;
}

and the Javascript values :

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;

My goal at the end is to display the value of "Force" then if you hoover this value with the mouse it display where this Force value comes from

for exemple:

Force : 20 (and if you hoover the "20" a tooltip appears and shows (15 + 5)

I found ways in jquery but I dont want to use jquery for specific reason.

Do you have any idea ? Thank you :)

Add listeners for the mouseover and mouseout events.

Barmar
– Barmar

2015-02-20 11:56:42 +00:00
Commented Feb 20, 2015 at 11:56 — Barmar
– Barmar, Commented Feb 20, 2015 at 11:56

Joe Fitter · Accepted Answer · 2015-02-20 12:03:28Z

1

is this what you are after?

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/

answered Feb 20, 2015 at 12:03

Joe Fitter

1,3097 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add a Tooltip - Javascript without jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related