
    <style>
    /*  this positions the help box and puts the dotted line under the hover-able text */
    .helptip {
        position: relative;
        display: inline-block;
        /* border-bottom: 1px dotted pink; */
    }  

    /*  this defines the font, shape, background color, etc. for text box */
    .helptip .helptiptext {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 14px;
        visibility: hidden;
        width: 200px;
        background-color: #ccc;
        color: white;  /* font color */
        text-align: left;
        border-radius: 6px;
        padding: 5px 10px; /* padding top/bottom and sides */
        position: absolute;
        z-index: 1;
        top: 115%; /* positions below the element */
    	left: 20px; /* and shifted slightly to the right */
    }

	/*  this defines the caret on the top-left side of the box  */
	.helptip .helptiptext::after {
	    content: " ";
	    position: absolute;
	    bottom: 100%;  /* At the top of the tooltip */
	    left: 10%;
	    margin-left: -5px;
	    border-width: 5px;
	    border-style: solid;
	    border-color: transparent transparent #ccc transparent;
	}    

    /*  this defines the font, shape, background color, etc. for text box */
    .helptip .helptiptext-right {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 14px;
        visibility: hidden;
        width: 200px;
        background-color: #ccc;
        color: white;  /* font color */
        text-align: left;
        border-radius: 6px;
        padding: 5px 10px; /* padding top/bottom and sides */
        position: absolute;
        z-index: 1;
        top: -5px; /* positions vertically next to element */ 
        left: 110%; /* positions horizontally next to dotted line */
    }

    /*  this defines the caret on the left side of the box  */
    .helptip .helptiptext-right::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent #ccc transparent transparent;
    }   


    /*  this defines the font, shape, background color, etc. for text box */
    .helptip .helptiptext-left {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 14px;
        visibility: hidden;
        width: 95%;
        background-color: #ccc;
        color: white;  /* font color */
        text-align: left;
        border-radius: 6px;
        padding: 5px 10px; /* padding top/bottom and sides */
        position: absolute;
        z-index: 1;
        top: -5px; /* positions vertically ...  */ 
        right: 95%; /* to left of input field (for select fields) */
    }

    /*  this defines the caret on the left side of the box  */
    .helptip .helptiptext-left::after {
        content: "";
        position: absolute;
        top: 20px;
        left: 100%; /* To the right of the tooltip */
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent transparent #ccc;
    }   

    .helptip:hover .helptiptabletext {
        transition-delay:1.25s;
        visibility: visible;
    }
 
    .helptip:active .helptipformtext{
        transition-delay:0.25s;
        visibility: visible;
    }  

    </style>