:root {
  --backgroundColor: #2ab27b;
  --color: white;
  --maxWidth: 35rem;
}

.popover {
    font-family: inherit;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    display: inline-block;
    max-width: 276px;
    padding: 1px;
    text-align: left;
    text-align: start;
    font-size: inherit;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.popover:hover {
    cursor: help;
}

.popDiv:before {
  content:"";
  width: 0; 
  height: 0;
}

.popDiv.left:before {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right:10px solid var(--backgroundColor); 
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-100%, -50%);
}

.popDiv.right:before {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left:10px solid var(--backgroundColor); 
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(0%, -50%);
}

.popDiv.top:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top:10px solid var(--backgroundColor); 
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0%);
}

.popDiv.bottom:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom:10px solid var(--backgroundColor); 
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -100%);
}

.popDiv:before {
  left: 0%;
  transform: translate(-100%, -50%);
}

.popDiv {
    content: attr(data-content);
    max-width: var(--maxWidth);
    width: max-content;
    position: absolute;
    background-color: var(--backgroundColor);
    color: var(--color);
    padding: 1rem;
    border-radius: .3rem;
  
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
  
   z-index:99999999;
}

.popDiv p {
  margin: 0;
}