Develop Reference

How to add/remove class on mouse hover in JavaScript?

I want to add class as I hover over an item and remove it as soon as the hover is removed in JavaScript. For now, my code is not removing the class until I hover over that item again.
myChart.on('mouseover', function(params){
var collapseItem = params.name + "-content"
var toCollapse = document.getElementById(collapseItem)
var collapseHeading = toCollapse.previousElementSibling
collapseHeading.classList.toggle("active")
})

is this you want?
var myChart = document.getElementById("tt");
myChart.onmouseover = function(event){
var collapseItem = event.target.tagName + "-content";
var toCollapse = document.getElementById(collapseItem);
var collapseHeading = toCollapse.previousElementSibling;
collapseHeading.classList.toggle("active");
}
#tt{
height: 40px;
width: 40px;
background-color: red;
}
.active{
height: 50px;
width: 50px;
background-color: green;
}
<div id="tt">
<div id="prev">
</div>
<div id="DIV-content">
</div>
</div>

you can listen to mouseout event (taken from this post)
function toggleActiveClass(params){
var collapseItem = params.name + "-content"
var toCollapse = document.getElementById(collapseItem)
var collapseHeading = toCollapse.previousElementSibling
collapseHeading.classList.toggle("active")
}
myChart.on('mouseover', toggleActiveClass);
myChart.on('mouseout', toggleActiveClass);

You need to use "mouseover" as well as "mouseout" to make the toggle or class addition/removal work properly. Currently when your cursor leave there no function to remove the class.
function toggleActiveClass(params) {
var collapseItem = params.name + "-content"
var toCollapse = document.getElementById(collapseItem)
var collapseHeading = toCollapse.previousElementSibling
collapseHeading.classList.toggle("active")
}
myChart.on('mouseover', toggleActiveClass);
myChart.on('mouseout', toggleActiveClass);

Delete button works only for last item

I just started working with Javascript and I am trying to make my first "Todo App".
The problem is, that my delete button which should be related to specific div is deleting only last div.
To better understaing check out my code on Codepen:
https://codepen.io/anon/pen/QVPxmG
or here:
var books = ["Bang-1","Bang-2","Bang-3","Bang-4"];
var wrapper = document.querySelector(".wrapper");
var element_div = document.querySelector(".element_div");
var load_button = document.querySelector(".load");
load_button.addEventListener("click", function(){
for(var x=0;x<books.length;x++){
var div = document.createElement("div");
div.setAttribute("class","element_div " + "element_div"+x);
wrapper.appendChild(div);
var element = document.createElement("p");
div.appendChild(element);
element.setAttribute("class", "element"+x);
element.innerHTML = books[x];
var del = document.createElement("button");
del.setAttribute("class", "delete"+x);
div.appendChild(del);
del.innerHTML = 'Delete';
del.addEventListener("click", function(){
div.remove();
},false);
}
},false);
var clear = document.querySelector(".clear");
clear.addEventListener("click", function(){
wrapper.innerHTML = "";
},false);
What Should I change to delete proper div?
Thanks, Mike.

The problem in your case come because of closure,you have declared all your variables using var which will belong to the functional scope and hence when you click on delete, the div that is deleted is the last div since that is what div variable points to after the for loop iteration.
Changing everything to let will work, since let is block scoped and the declaration will be limited to within the for loop
for(let x=0;x<books.length;x++){
let div = document.createElement("div");
div.setAttribute("class","element_div " + "element_div"+x);
wrapper.appendChild(div);
let element = document.createElement("p");
div.appendChild(element);
element.setAttribute("class", "element"+x);
element.innerHTML = books[x];
let del = document.createElement("button");
del.setAttribute("class", "delete"+x);
div.appendChild(del);
del.innerHTML = 'Delete';
del.addEventListener("click", function(){
div.remove();
},false);
}
},false);
Working codepen

You have to use "this" instead of "div" in click event. Something like this:
this.parentElement.remove();

div will have the content after for loop ends. You should capture the correct div for every iteration like below, using pure javascript's immediately invoking function
var books = ["Bang-1", "Bang-2", "Bang-3", "Bang-4"];
var wrapper = document.querySelector(".wrapper");
var load_button = document.querySelector(".load");
load_button.addEventListener("click", function() {
for (var x = 0; x < books.length; x++) {
var div = document.createElement("div");
(function(div) { // Immediately invoking function - IIFE
div.setAttribute("class", "element_div " + "element_div" + x);
wrapper.appendChild(div);
var element = document.createElement("p");
div.appendChild(element);
element.setAttribute("class", "element" + x);
element.innerHTML = books[x];
var del = document.createElement("button");
del.setAttribute("class", "delete" + x);
div.appendChild(del);
del.innerHTML = 'Delete';
del.addEventListener("click", function() {
div.remove();
}, false);
})(div);
}
}, false);
var clear = document.querySelector(".clear");
clear.addEventListener("click", function() {
wrapper.innerHTML = "";
}, false);
* {
margin: 0;
padding: 0;
}
.container {
width: 300px;
height: 250px;
position: relative;
}
.container .wrapper {
width: 300px;
height: 200px;
padding: 10px;
background: aqua;
position: relative;
}
.container .wrapper .element_div {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.container .load {
position: absolute;
bottom: 0px;
}
.container .clear {
position: absolute;
bottom: 0px;
right: 10px;
}
<div class="container">
<div class="wrapper" id="wrapper">
<div class="element_div">
<p class="element">Bang</p>
<button class="delete">Delete</button>
</div>
</div>
<button class="load">LOAD</button>
<button class="clear">CLLEAR</button>
</div>

eventlistener javascript problems

I'm trying to learn Javascript and at the moment and I am working on AddEventListener.
What I'm trying to do is to add a new row and so far it works.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.colorOrange {
background-color: orange;
}
.colorBlue {
background-color: blue;
}
.colorYellow {
background-color: yellow;
}
.colorGray {
background-color: gray;
}
.colorRed {
background-color: red;
}
.colorGreen {
background-color: green;
}
.colorWhite {
background-color: white;
}
#main {
margin: 0 auto;
width: 325px;
text-align: center;
background-color: gray;
}
.row {
width: 300px;
padding: 10px;
border: 1px solid black;
display: block;
}
.hideButton, .mainText, .deleteButton {
margin: 0 auto;
padding: 10px;
border: 1px solid black;
display: inline;
}
.btn {
}
</style>
</head>
<body>
<div id="main">
<div class="AddBtn btn">Add</div>
<input type="text" id="txtBox" name="text till ruta" />
</div>
<script>
var rownr = 0;
function addListeners() {
var addButton = document.getElementsByClassName('AddBtn');
for (var i = 0; i < addButton.length; i++) {
var addBtn = addButton[i];
addBtn.addEventListener('click', function () {
var elBtn = event.srcElement;
var valueBtn = elBtn.textContent;
alert(valueBtn);
hideOrShow();
addRow();
function addRow() {
switch (valueBtn) {
case "Add":
var input = document.getElementById('txtBox').value;
rownr++;
var div = document.createElement('div');
div.className = "row";
document.getElementById("main").appendChild(div);
var div2 = document.createElement('div');
div2.className = "hideButton colorGreen";
var tx = document.createTextNode("<");
div2.appendChild(tx);
div2.addEventListener('click', hideOrShow, false);
div.appendChild(div2);
var div3 = document.createElement("div");
if (input.toLowerCase() == "red") {
div3.className = "mainText colorRed";
}
else if (input.toLowerCase() == "orange") {
div3.className = "mainText colorOrange";
}
else if (input.toLowerCase() == "blue") {
div3.className = "mainText colorBlue";
}
else if (input.toLowerCase() == "yellow") {
div3.className = "mainText colorYellow";
}
else if (input.toLowerCase() == "gray") {
div3.className = "mainText colorGray";
} else {
div3.className = "mainText colorWhite";
}
tx = document.createTextNode(rownr + " " + input);
div3.appendChild(tx);
div.appendChild(div3);
var div4 = document.createElement("div");
div4.className = "deleteButton colorRed";
tx = document.createTextNode("X");
div4.appendChild(tx);
//div4.addEventListener('click', deleBtn, false);
div.appendChild(div4);
var linebreak = document.createElement("br");
div.appendChild(linebreak);
default:
}
}
So far everything works as I want it to do. But when I click on "<" it will go in to this function and find all tags with the hideButton class in it.
The first click it won't find anything, but the second time it will find the "<" value and an alert window will popup and show the value. Here is where I
get lost and can't get it to work. When you click the the third time it will
loop or whatever to call it - anyway it will show the alert window 2 times and
then if you repeat the same click it will do the same thing 3 times and so it goes.
function hideOrShow() {
var hideButton = document.getElementsByClassName('hideButton');
for (var j = 0; j < hideButton.length; j++) {
hideBtn = hideButton[j];
hideBtn.addEventListener('click', function () {
var hideElBtn = event.srcElement;
var valueHideBtn = hideElBtn.textContent;
alert(valueHideBtn);
}, false);
}
}
}, false);
}
}
window.onload = addListeners;
</script>
</body>
</html>
The goal with this exercise is that
when you click add button add the text from the input field and add that text to the new row.
and "<" shall hide the row and change it to ">" to show it again
and "X" shall just delete the row.
But what I need help with is finding the value part that I mentioned above.

Here is my rework of your javascript. I explained my solution in your comment, but it may be a bit more clear if illustrated.
In the addListeners function, I removed the hideOrShow call as it shouldn't be called in the add button.
Next, I removed the for loop in the hideOrShow method as you really are only after the caller. I also removed the addEventListener call in the same method as you already have an event listener on that element, so there's no need to add one again.
var rownr = 0;
function addListeners() {
var addButton = document.getElementsByClassName('AddBtn');
for (var i = 0; i < addButton.length; i++) {
var addBtn = addButton[i];
addBtn.addEventListener('click', function () {
var elBtn = event.srcElement;
var valueBtn = elBtn.textContent;
alert(valueBtn);
//hideOrShow();
addRow();
function addRow() {
switch (valueBtn) {
case "Add":
var input = document.getElementById('txtBox').value;
rownr++;
var div = document.createElement('div');
div.className = "row";
document.getElementById("main").appendChild(div);
var div2 = document.createElement('div');
div2.className = "hideButton colorGreen";
var tx = document.createTextNode("<");
div2.appendChild(tx);
div2.addEventListener('click', hideOrShow, false);
div.appendChild(div2);
var div3 = document.createElement("div");
if (input.toLowerCase() == "red") {
div3.className = "mainText colorRed";
}
else if (input.toLowerCase() == "orange") {
div3.className = "mainText colorOrange";
}
else if (input.toLowerCase() == "blue") {
div3.className = "mainText colorBlue";
}
else if (input.toLowerCase() == "yellow") {
div3.className = "mainText colorYellow";
}
else if (input.toLowerCase() == "gray") {
div3.className = "mainText colorGray";
} else {
div3.className = "mainText colorWhite";
}
tx = document.createTextNode(rownr + " " + input);
div3.appendChild(tx);
div.appendChild(div3);
var div4 = document.createElement("div");
div4.className = "deleteButton colorRed";
tx = document.createTextNode("X");
div4.appendChild(tx);
//div4.addEventListener('click', deleBtn, false);
div.appendChild(div4);
var linebreak = document.createElement("br");
div.appendChild(linebreak);
default:
}
}
function hideOrShow() {
var hideButton = document.getElementsByClassName('hideButton');
var hideElBtn = event.srcElement;
var valueHideBtn = hideElBtn.textContent;
alert(valueHideBtn);
}
}, false);
}
}
window.onload = addListeners;

Passing around event object without jquery

Apologies for the basic question. It's hard to find information about JS event handling without finding an explanation that includes jQuery, and I'm trying to manipulate the DOM with pure Javascript. It's been helping me better understand how the browser works.
I'm trying to call a function to add an additional class to elements with the same class.
Can someone explain the correct syntax here?
Is it necessary to reference the ID?
I've tried a number of approaches. Thanks so much.
function animateSquare(e) {
var id = e.target.id
var el = document.getElementById(id);
el.className = el.className + "newClass";
};
window.onload = function() {
var anim = document.getElementsByClassName("squareThing");
for (var i = 0; i < anim.length; i++) {
anim[i].click(function(e) {
animateSquare(e);
});
}
}
<div class="squarething" id="one"></div>
<div class="squarething" id="two"></div>

The standard Javascript method to add event bindings, analogous to .on() in jQuery, is addEventListener.
And when you add a class to el.className, you need to include a space before it, to separate it from the existing classes.
You don't need to use getElementById(id), since e.target is the element itself -- you're getting the element, getting its ID, and then looking up the element again by ID, which is redundant.
function animateSquare(e) {
var el = e.target;
el.className = el.className + " newClass";
};
window.onload = function() {
var anim = document.getElementsByClassName("squarething");
for (var i = 0; i < anim.length; i++) {
anim[i].addEventListener('click', function(e) {
animateSquare(e);
});
}
}
.squarething {
width: 50px;
height: 50px;
background-color: green;
margin: 2px;
}
.newClass {
background-color: red;
}
<div class="squarething" id="one"></div>
<div class="squarething" id="two"></div>

This should be enough. Try it:
function animateSquare() {
this.className += " newClass";
}
window.onload = function() {
var anim = document.getElementsByClassName("squarething");
for (var i = 0; i < anim.length; i++) {
anim[i].onclick = animateSquare;
}
}
.squarething {
padding: 1em;
margin: .5em;
float: left;
background: blue;
}
.squarething.newClass {
background: orange;
}
<div class="squarething" id="one"></div>
<div class="squarething" id="two"></div>

.click(handler) is a jQuery method - you want the .onclick or addEventListener methods:
window.onload = function() {
var anim = document.getElementsByClassName("squarething");
for (var i = 0; i < anim.length; i++) {
anim[i].onclick = animateSquare;
}
}
You can also use this inside your handler function:
function animateSquare(e) {
this.className = el.className + "newClass";
};

tooltip in pure JS

I am trying this code but i get: document.getElementsByName(...).style is undefined
I have also a problem with the delegation, i think. Any help?
<html>
<head>
<style type="text/css">
#toolTip {
position:relative;
width:200px;
margin-top:-90px;
}
#toolTip p {
padding:10px;
background-color:#f9f9f9;
border:solid 1px #a0c7ff;
-moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}
#tailShadow {
position:absolute;
bottom:-8px;
left:28px;
width:0;height:0;
border:solid 2px #fff;
box-shadow:0 0 10px 1px #555;
}
#tail1 {
position:absolute;
bottom:-20px;
left:20px;
width:0;height:0;
border-color:#a0c7ff transparent transparent transparent;
border-width:10px;
border-style:solid;
}
#tail2 {
position:absolute;
bottom:-18px;
left:20px;
width:0;height:0;
border-color:#f9f9f9 transparent transparent transparent;
border-width:10px;
border-style:solid;
}
</style>
<script type='text/javascript'>
function load () {
var elements = document.getElementsByName('toolTip');
for(var i=0; i<elements.length; i++) {
document.getElementsByName(elements[i]).style.visibility = 'hidden';
}
}
</script>
</head>
<body onload="load()">
<br><br><br><br><br><br><br><br><br><br><br><br>
<a class="hd"
onMouseOver="document.getElementsByName('toolTip')[0].style.visibility = 'visible'"
onmouseout ="document.getElementsByName('toolTip')[0].style.visibility = 'hidden'">aqui</a>
<div id="toolTip" name="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
<br><br><br>
<a class="hd"
onMouseOver="document.getElementsByName('toolTip')[0].style.visibility = 'visible'"
onmouseout ="document.getElementsByName('toolTip')[0].style.visibility = 'hidden'">aqui</a>
<div id="toolTip" name="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
</body>
</html>
demo

Try changing the id toolTip to a class:
<div class="toolTip">...</div>
And change your JS to use the display style-thing, rather than visibility, nd the onmouseover's are best dealt with using JS event delegation:
function load()
{
var i, tooltips = document.getElementsByClassName('toolTip'),
mouseOver = function(e)
{//handler for mouseover
e = e || window.event;
var i, target = e.target || e.srcElement,
targetToolTip = target.nextElementSibling || nextSibling;//gets the next element in DOM (ie the tooltip)
//check if mouse is over a relevant element:
if (target.tagName.toLowerCase() !== 'a' || !target.className.match(/\bhd\b/))
{//nope? stop here, then
return e;
}
targetToolTip.style.display = 'block';//make visible
for (i=0;i<tooltips.length;i++)
{//closures are neat --> you have a reference to all tooltip elements from load scope
if (tooltips[i] !== targetToolTip)
{//not the one you need to see
tooltips[i].style.display = 'none';
}
}
};
for (i=0;i<tooltips.length;i++)
{
tooltips[i].style.display = 'none';
}
//add listener:
if (document.body.addEventListener)
{//IE > 9, chrome, safari, FF...
document.body.addEventListener('mouseover',mouseOver,false);
}
else
{//IE8
document.body.attachEvent('onmouseover',mouseOver);
}
}
Google JavaScript event delegation and closures if this code isn't clear, but that's just how I would tackle this kind of thing. IMO, it's fairly efficient (you could use the closure scope to keep track of the tooltip that's currently visible and not loop through all of them, too, that would be even better:
function load()
{
var i, tooltips = document.getElementsByClassName('toolTip'),
currentToolTip,//<-- reference currently visible
mouseOver = function(e)
{
e = e || window.event;
var i, target = e.target || e.srcElement,
targetToolTip = target.nextElementSibling || nextSibling;
if (target.tagName.toLowerCase() !== 'a' || !target.className.match(/\bhd\b/) || targetToolTip === currentToolTip)
{//add check for currently visible TT, if so, no further action required
return e;
}
if (currentToolTip !== undefined)
{
currentToolTip.style.display = 'none';//hide currently visible
}
targetToolTip.style.display = 'block';//make new visible
currentToolTip = targetToolTip;//keep reference for next event
};
for (i=0;i<tooltips.length;i++)
{
tooltips[i].style.display = 'none';
}
if (document.body.addEventListener)
{
document.body.addEventListener('mouseover',mouseOver,false);
}
else
{
document.body.attachEvent('onmouseover',mouseOver);
}
}
And you're there.
Edit:
To hide the tooltip on mouseout, you can either add a second listener directly:
function load()
{
var i, tooltips = document.getElementsByClassName('toolTip'),
currentToolTip,//<-- reference currently visible
mouseOver = function(e)
{
e = e || window.event;
var i, target = e.target || e.srcElement,
targetToolTip = target.nextElementSibling || nextSibling;
if (target.tagName.toLowerCase() !== 'a' || !target.className.match(/\bhd\b/) || targetToolTip === currentToolTip)
{//add check for currently visible TT, if so, no further action required
return e;
}
if (currentToolTip !== undefined)
{
currentToolTip.style.display = 'none';//hide currently visible
}
targetToolTip.style.display = 'block';//make new visible
currentToolTip = targetToolTip;//keep reference for next event
},
mouseOut = function(e)
{
e = e || window.event;
var movedTo = document.elementFromPoint(e.clientX,e.clientY);//check where the cursor is NOW
if (movedTo === curentToolTip || currentToolTip === undefined)
{//if cursor moved to tooltip, don't hide it, if nothing is visible, stop
return e;
}
currentTooltip.style.display = 'none';
currentTooltip = undefined;//no currentToolTip anymore
};
for (i=0;i<tooltips.length;i++)
{
tooltips[i].style.display = 'none';
}
if (document.body.addEventListener)
{
document.body.addEventListener('mouseover',mouseOver,false);
document.body.addEventListener('mouseout',mouseOut,false);
}
else
{
document.body.attachEvent('onmouseover',mouseOver);
document.body.attachEvent('onmouseout',mouseOut);
}
}
Note, this is completely untested. I'm not entirely sure if IE < 9 supports elementFromPoint (gets the DOM element that is rendered at certain coordinates), or even if the IE event object has the clientX and clientY properties, but I figure a quick google will tell you more, including how to get the coordinates and the element that is to be found under the cursor in old, crummy, ghastly IE8, but this should help you on your way. Of course, if you don't want the contents of the tooltip to be selectable, just change the mouseOut function to:
mouseOut = function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
if (currentToolTip)
{
currentToolTip.style.diplay = 'none';
currentToolTip = undefined;
}
};
No need to check if the mouseout was on the correct element, just check if there is a current tooltip, and hide it.

Try using classes to mark the tooltips:
<div id="toolTip1" class="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
And JQuery to toggle the visibility using the class as the selector:
$('.toolTip').attr('visibility', 'hidden')
Definitely clean up the non-unique Id's - this will cause you no end of troubles otherwise

Your problem is likely because you're using the same id for both the tooltips. This is invalid; an id should be unique -- only one element in a given page should have a specific ID.
If you need a shared identifier for multiple objects, use a class instead.

I built a tooltip with a border in pure js that doesn't use hover.
html
<div id="infoId" class='info' style="font-variant:small-caps;text-align:center;padding-top:10px;">
<span id="innerspanid">
</span>
</div>
</div>
<input id="startbtn" class="getstartedbtn" type="button" value="Start >" />
</div>
js
function getTextWidth(text, font) {
// re-use canvas object for better performance
const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
const context = canvas.getContext("2d");
context.font = font;
const metrics = context.measureText(text);
return metrics.width;
}
function getCssStyle(element, prop) {
return window.getComputedStyle(element, null).getPropertyValue(prop);
}
function getCanvasFontSize(el = document.body) {
const fontWeight = getCssStyle(el, 'font-weight') || 'normal';
const fontSize = getCssStyle(el, 'font-size') || '16px';
const fontFamily = getCssStyle(el, 'font-family') || 'Times New Roman';
return `${fontWeight} ${fontSize} ${fontFamily}`;
}
let arrowDimensionWidth = 20;
let arrowDimensionHeight = 20;
let tooltipTextHorizontalMargin = 50;
function openTooltip(text) {
let innerSpan = document.getElementById("innerspanid");
innerSpan.innerHTML = text;
let computedW = getTextWidth(text, getCanvasFontSize(innerSpan)) + tooltipTextHorizontalMargin;
let pointer = document.getElementById('pointer')
pointer.style.right = (((computedW / 2) - (arrowDimensionWidth / 2)) - (0)) + 'px';
let elem = document.getElementById('tooltipHost').parentNode.querySelector('div.info_container');
elem.style.left = ((tooltipHost.getBoundingClientRect().width - computedW) / 2) + "px";
elem.style.width = computedW + "px";
elem.style.display = 'block';
}
function buildTooltip() {
let elements = document.querySelectorAll('div.tooltip');
// Create a canvas element where the triangle will be drawn
let canvas = document.createElement('canvas');
canvas.width = arrowDimensionWidth; // arrow width
canvas.height = arrowDimensionHeight; // arrow height
let ctx = canvas.getContext('2d');
ctx.strokeStyle = 'darkred'; // Border color
ctx.fillStyle = 'white'; // background color
ctx.lineWidth = 1;
ctx.translate(-0.5, -0.5); // Move half pixel to make sharp lines
ctx.beginPath();
ctx.moveTo(1, canvas.height); // lower left corner
ctx.lineTo((canvas.width / 2), 1); // upper right corner
ctx.lineTo(canvas.width, canvas.height); // lower right corner
ctx.fill(); // fill the background
ctx.stroke(); // stroke it with border
ctx.fillRect(0, canvas.height - 0.5, canvas.width - 1, canvas.height + 2); //fix bottom row
// Create a div element where the triangle will be set as background
pointer = document.createElement('div');
pointer.id = "pointer"
pointer.style.width = canvas.width + 'px';
pointer.style.height = canvas.height + 'px';
pointer.innerHTML = ' ' // non breaking space
pointer.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
pointer.style.position = 'absolute';
pointer.style.top = '2px';
pointer.style.zIndex = '1'; // place it over the other elements
let idx;
let len;
for (idx = 0, len = elements.length; idx < len; ++idx) {
let elem = elements[idx];
let text = elem.querySelector('div.info');
let info = document.createElement('div');
text.parentNode.replaceChild(info, text);
info.className = 'info_container';
info.appendChild(pointer.cloneNode());
info.appendChild(text);
}
}
window.addEventListener('load', buildTooltip);
window.addEventListener('load', wireup);
function wireup() {
document.getElementById('startbtn').addEventListener('click', function (evt1) {
openTooltip("bad email no # sign");
return false;
});
}
css
div.tooltip {
position: relative;
display: inline-block;
}
div.tooltip > div.info {
display: none;
}
div.tooltip div.info_container {
position: absolute;
left: 0px;
width: 100px;
height: 70px;
display: none;
}
div.tooltip div.info {
position: absolute;
left: 0px;
text-align: left;
background-color: white;
font-size: 18px;
left: 1px;
right: 1px;
top: 20px;
bottom: 1px;
color: #000;
padding: 5px;
overflow: auto;
border: 1px solid darkred;
border-radius: 5px;
}