.iatiptop {
  position: relative;
  display: inline-block;
/*  border-bottom: 1px dotted black;*/
}
    .iatiptop .iatiptoptext {
        visibility: hidden;
        width: auto;
        background-color: darkred;
        color: white;
        text-align: center;
        white-space: nowrap;
        font-size: 0.8em;
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        border-color: darkred;
        padding: 1px 2px;
        margin: 0 0 3px 0;
        /* Position the tip */
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: 50%;
        margin-left: -100%;
    }
    .iatiptop:hover .iatiptoptext {
      visibility: visible;
    }    
    /*.iatiptop .iatiptoptext::after {*/ /* arrow*/
      /*content: " ";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -4px;
      border-width: 4px;
      border-style: solid;
      border-color: darkred transparent transparent transparent;
    }*/


.iatipbottom {
  position: relative;
  display: inline-block;
/*  border-bottom: 1px dotted black;*/
}
    .iatipbottom .iatipbottomtext {
        visibility: hidden;
        width: auto;
        background-color: white;
        color: black;
        text-align: left;
        word-wrap:break-word;
        font-size: 0.8em;
        border-radius: 0px;
        border-style: solid;
        border-width: 1px;
        border-color: black;
        padding: 2px 5px;
        margin: 0 0 0 0;
        /* Position the tip - left bottom*/
        position: absolute;
        z-index: 1;
        top: 110%;
        right: 100%;
        margin-right: -50%;
    }
    .iatipbottom:hover .iatipbottomtext {
        visibility: visible;
    }
    /*    .iatipbottom .iatipbottomtext::after {
        content: " ";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -4px;
        border-width: 4px;
        border-style: solid;
        border-color: transparent transparent darkred transparent;
    }*/


.iatipleft {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;*/
}
    .iatipleft .iatiplefttext {
        visibility: hidden;
        width: auto;
        background-color: white;
        color: black;
        text-align: left;
        word-wrap: break-word;
        font-size: 0.9em;
        border-radius: 0px;
        border-style: solid;
        border-width: 1px;
        border-color: black;
        padding: 2px 5px;
        margin: 0 0 0 0;
        /* Position the tip */
        position: absolute;
        z-index: 1;
        top: -5px;
        right: 105%;
    }
    .iatipleft:hover .iatiplefttext {
        visibility: visible;
    }    
    /*.iatipleft .iatiplefttext::after {
        content: " ";
        position: absolute;
        top: 20%;
        left: 100%;*/ /* To the right of the tip */
        /*margin-top: -4px;
        border-width: 4px;
        border-style: solid;
        border-color: transparent transparent transparent darkred;
    }*/


.iatipright {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;*/
}

    .iatipright .iatiprighttext {
        visibility: hidden;
        width: auto;
        background-color: white;
        color: darkred;
        text-align: center;
        word-wrap: break-word;
        font-size: 0.8em;
        border-radius: 6px;
        border-style: solid;
        border-width: 1px;
        border-color: darkred;
        padding: 1px 2px 1px 2px;
        margin: 0 0 0 2px;
        /* Position the tip */
        position: absolute;
        z-index: 1;
        top: 0;
        left: 120%;
    }
        .iatipright .iatiprighttext::after {
            content: " ";
            position: absolute;
            top: 50%;
            right: 100%; /* To the left of the tip */
            margin-top: -4px;
            border-width: 4px;
            border-style: solid;
            border-color: transparent darkred transparent transparent;
        }
    .iatipright:hover .iatiprighttext {
        visibility: visible;
    }

/*example
    <div class="iatiptop" >
    <i class="oi oi-collapse-down" @onclick="ToggleView" style="font-size: 18px; margin-left: 5px;" > </i >
    <span class="iatiptoptext" > edit bottom</span >
    </div >
*/