Tooltip code

*********************************************************
code 1 :
*********************************************************
  .tooltip {
    color: blue;
    cursor: pointer;
    float: right;
  }

  .tooltip .tooltiptext {
    visibility: hidden;
    background-color: white;
    color: black;
    border: 1px solid blue;
    position: absolute;
    z-index: 1;
    width: 565px;
    margin-left: -500px;
    right: 5%;
    opacity: 0;
    transition: opacity 1s;
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s;
  }

  .tooltip .tooltiptext .title {
    background-color: blue;
    color: #00fff3;
    padding: 3px;
  }

  .tooltip .tooltiptext .content {
    padding: 5px;
    display: inline-flex;
  }

  .tooltip .tooltiptext .content ul {
    margin: 0;
  }

  .tooltip .tooltiptext .content ul li {
    list-style: none;
  }

  .tooltip .tooltiptext .content ul .title-info {
    color: blue;
    text-align: center;
  }

*********************************************************
code 2 :
*********************************************************
<div class="tooltip">Hover over me

  <span class="tooltiptext">
    <div class="title">beIn Sports NENA 11 HD - 2019-05-18 16:00:00</div>
    <div class="content">
      <ul>
        <li class="title-info">pos</li>
        <li>25.5°e</li>
        <li>25.5°e</li>
      </ul>

      <ul>
        <li class="title-info">satellite</li>
        <li>Eshall 1</li>
        <li>Eshall 1</li>
      </ul>

      <ul>
        <li class="title-info">freq</li>
        <li>11.623 V</li>
        <li>11.623 V</li>
      </ul>

      <ul>
        <li class="title-info">symbol</li>
        <li>27500 - 2/3</li>
        <li>27500 - 2/3</li>
      </ul>

      <ul>
        <li class="title-info">encryption</li>
        <li>HD Irdeto</li>
        <li>HD VideoGuard</li>
      </ul>

    </div><!-- .content -->
  </span><!-- .tooltiptext -->
</div><!-- .tooltip -->
****************************************************