Make tooltip use CSS

dashboard/css/layout.css

@@ -10,6 +10,36 @@ h1 {
    font-size            : 25pt;
 }
 
+a.tip {
+   text-decoration      : none;
+}
+
+a.tip:hover {
+   position             : relative;
+}
+
+a.tip span {
+   display              : none
+}
+
+a.tip:hover span {
+   background           : #000000;
+   opacity              : 0.8;
+   border               : none;
+   border-radius        : 5px 5px 5px 5px;
+   font-family          : calibri, verdana, arial, comic sans;
+   font-size            : 12pt;
+   text-decoration      : none;
+   white-space          : nowrap;
+   color                : #FFFFFF;
+   padding              : 6px 6px 6px 6px;
+   margin               : 10px;
+   display              : block;
+   z-index              : 50; 
+   position             : absolute;
+   top                  : 10px;
+}
+
 #top {
    height               : 115px;
    background-color     : #FFFFFF;

dashboard/pgs/repeaters.php

@@ -31,7 +31,7 @@ for ($i=0;$i<$Reflector->NodeCount();$i++) {
    <td align="center">';
    list ($Flag, $Name) = $Reflector->GetFlag($Reflector->Nodes[$i]->GetCallSign());
    if (file_exists("./img/flags/".$Flag.".png")) {
-      echo '<img src="./img/flags/'.$Flag.'.png" height="15" alt="'.$Name.'" title="'.$Name.'" />';
+      echo '<a href="#" class="tip"><img src="./img/flags/'.$Flag.'.png" height="15" alt="'.$Name.'" /><span>'.$Name.'</span></a>';
    }
    echo '</td>
    <td><a href="http://www.aprs.fi/'.$Reflector->Nodes[$i]->GetCallSign();

dashboard/pgs/users.php

@@ -137,7 +137,7 @@ for ($i=0;$i<$Reflector->StationCount();$i++) {
    
       list ($Flag, $Name) = $Reflector->GetFlag($Reflector->Stations[$i]->GetCallSign());
       if (file_exists("./img/flags/".$Flag.".png")) {
-         echo '<img src="./img/flags/'.$Flag.'.png" height="15" alt="'.$Name.'" title="'.$Name.'" />';
+         echo '<a href="#" class="tip"><img src="./img/flags/'.$Flag.'.png" height="15" alt="'.$Name.'" /><span>'.$Name.'</span></a>';
       }
       echo '</td>
    <td width="75"><a href="https://www.qrz.com/db/'.$Reflector->Stations[$i]->GetCallsignOnly().'" class="pl" target="_blank">'.$Reflector->Stations[$i]->GetCallsignOnly().'</a></td>