.delivery-note-tooltip {

  position:relative;

  display: inline-block;

  border-bottom: 1px dotted black;

}



.delivery-note-tooltip .tooltiptext

{

  visibility: hidden;

  background-color: #555;

  color: #fff;

  text-align: center;

  padding: 5px 0;

  border-radius: 6px;



  /* Position the tooltip text */

  position: absolute;

  z-index: 5;

  top: 125%;

  right: 0%;

  margin-right: -40px;

  margin-left: -40px;



  /* Fade in tooltip */

  opacity: 0;

  transition: opacity 0.3s;

}



/* Tooltip arrow */

.delivery-note-tooltip .tooltiptext::after {

  content: "";

  position: absolute;

  bottom: 100%;

  left: 50%;

  margin-left: -5px;

  border-width: 5px;

  border-style: solid;

  border-color: transparent transparent #555 transparent;

}



/* Show the tooltip text when you mouse over the tooltip container */

.delivery-note-tooltip:hover .tooltiptext {

  visibility: visible;

  opacity: 1;

}