CSS: After clicking the button, you will see the divs getting created in line. I want "divs" of second row to be arranged right below first row of "divs" but they getting arranged leaving a gap. The text alignments inside the "divs" shouldn't get disturbed.
function myFunction() {
addWordToList("Apple", "Fruit");
}
var spno = 0;
function addWordToList(Word, Meaning)
{
spno++;
var dv = document.createElement("DIV");
document.body.appendChild(dv);
dv.setAttribute("class", "tooltip");
dv.setAttribute("id", "pilldiv"+spno);
document.getElementById("pilldiv"+spno).textContent=Word;
dv.insertAdjacentHTML('afterend', " ");
var spn = document.createElement("SPAN");
dv.appendChild(spn);
spn.setAttribute("class", "tooltiptext");
spn.setAttribute("id", "spn"+spno);
document.getElementById("spn"+spno).textContent=Meaning;
}.tooltip {
position: relative;
display: inline-block;
width: auto;
height: 1.6em;
margin: 4em auto;
padding-left: 10px;
padding-right: 10px;
border-radius: 10%/50%;
background: linear-gradient(to right, #11998E , #38EF7D);
font-weight: 700;
}
.tooltip .tooltiptext {
visibility: hidden;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="myFunction()">Click to Create Divs</button>
</body>
</html>Change the tooltip's css to following:
.tooltip {
position: relative;
display: inline-block;
width: auto;
height: 1.6em;
padding-left: 10px;
padding-right: 10px;
border-radius: 10%/50%;
background: linear-gradient(to right, #11998E , #38EF7D);
font-weight: 700;
}
i.e. remove "margin: 4em auto;". Due to margin, the actual height of the box is getting increased and creating the gap.