Tool tip text messing alignment of tool tip target

Question

I have a HTML table that has the cells filled with green dots or red dots to indicate a parameter is compliant or noncompliant. The dots are created with CSS.

The dots are centered in the html table cell

.dotgreen {
  height: 15px;
  width: 15px;
  background-color: #80ba02;
  border-radius: 50%;
  display: inline-block;
}

.dotred {
  height: 15px;
  width: 15px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
}

<td>
  <div style="text-align:center"><span class="dotgreen"></span></div>
</td>

However for some of the dots, I want to add a tooltip, so just hover over the dot and it gives some specific info.

But anytime I add a tooltip to a dot, the dot gets aligned left in the HTML cell. So I have some columns of dots in the center, and other columns of dots to the left. How can I make sure all dots are centered?

The HTML for that cell is like this, My tooltip CSS style sheet looks like this:

.dotgreen {
  height: 15px;
  width: 15px;
  background-color: #80ba02;
  border-radius: 50%;
  display: inline-block;
}

.dotred {
  height: 15px;
  width: 15px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
}

.tooltip {
  position: relative;
  display: inline-block;
  #border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 340px;
  background-color: #4176b3;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 20px 10px;
  /* Position the tooltip */
  position: absolute;
  display: block;
  z-index: 1;
  /* top: 150%; */
  /*  left: 50%; */
  font-size: 14px;
  font-family: arial, verdana;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 18%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #4176b3 transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<td>
  <div class=tooltip>
    <div style="text-align:center"><span class="dotgreen"></span></div><span class=tooltiptext>BLAH-BLAH</span></div>
</td>

Answer 1

I found your tooltip less flexible, so I have created a new one which is much more simpler and flexible. Follow below steps to create one .

1. Create a div in which we would have text on which we want to add hover tooltip. In below example I have created a div with name textDiv which contains text Hover me !.
2. Now next to Hover me ! text we will create another div which will contain text for tooltip. In below example I have created tooltip div and inside it I have Hey, you hovered ! text. We are done with html here.
3. Inside style we need to add position: relative to .textDiv so that our tooltip will be contained inside .textDiv when we will add position: absolute to .tooltip. You can change position of tooltip with help of left,right,top & bottom. I have shown tooltip to right of text.
4. For final step we need to show tooltip when hovered, for that we will add display: none to tooltip first and then we will add this .textDiv:hover > .tooltip{ display: block; } which ensures that whenever text is hovered it will show tooltip.

That's all you can customize tooltip as per your need. Below is working example and click here to open codepen.

body{
  margin: 0;
  padding: 0;
}

.mainDiv{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.textDiv{
  cursor: pointer;
  position: relative;
}

.tooltip{
  display: none;
  color: white;
  background-color: black;
  padding: 5px 10px;
  border-radius: 5px;
  position: absolute;
  top: -5px;
  left: 100px;
  width: 150px;
}

.textDiv:hover > .tooltip{
  display: block;
}

<div class="mainDiv">
  <div class="textDiv">
    Hover me !
    <div class="tooltip">
      Hey, you hovered !
    </div>
  </div>
</div>