InfoIcon in HTML mit Alternative Text lösung 2

ich habe zwei grosse Probleme. 1.) Ich moechte gern und NUR in HTML (also nicht in oder mit CSS!) ein rundes Info Icon ⓘ erstellen, was ich aber mit einem Alternative-Text versehen möchte. Den Buchstaben "i" fuer Information habe ich auch reinbekommen, auch der alternative Text hat funktioniert, nur auf der Homepage, wo das dann erscheinen soll, da war alles total verschoben! Klappt also nicht so, wie ich mir das so vorstelle. 2.) Weiterhin brauche ich außerdem ein ebenfalls rundes Icon, aber mit border: double, also doppelter Borderline und auch mit Alternative Text. ABER halt eben nur in und mit HTML!!! Kein CSS! Wenn das irgendwie funktioniert, freue ich mich sehr über eure Hilfe, ich komme leider nicht weiter. Vielen Dank.

Der hier verwendete Code

<span id="logo" onmouseover='document.getElementById("da").style.display="blocK";'onmouseout='document.getElementById("da").style.display="none";' style="width:24px;height:24px;display: inline-block;background-color: #808080;border:3px double white; border-radius: 50%;color:black;font-size:20px;font-weight:normal;text-align:center;cursor:help;"><i id="da" style="display:none;width:150px;height:auto;background-color: #808080;border:3px double white; border-radius: 50%;color:black;color:black;font-size:16px;font-color:black;padding:25px;" >hallo das ist der text der lang sein darf,und egal wie viel Text mann hier rein schreibt ,der Title kasten wächs auch mit.Notfalls kann man die width; und height: Werte noch auf den Text anpassen</i>i</span> <br> <h1> Oder </h1> <span id="logo" onmouseover='document.getElementById("da1").style.display="blocK";'onmouseout='document.getElementById("da1").style.display="none";' style="width:24px;height:24px;display: inline-block;background-color: #808080;border:3px double white; ;color:black;font-size:20px;font-weight:normal;text-align:center;cursor:help;"><i id="da1" style="display:none;width:150px;height:auto;background-color: #808080;border:3px double white; color:black;color:black;font-size:16px;font-color:black;padding:25px;" >hallo das ist der text der lang sein darf,und egal wie viel Text mann hier rein schreibt ,der Title kasten wächs auch mit.Notfalls kann man die width; und height: Werte noch auf den Text anpassen</i>i</span> <h1> Oder </h1> <span id="logo" onmouseover='document.getElementById("da2").style.display="blocK";'onmouseout='document.getElementById("da2").style.display="none";' style="width:24px;height:24px;display: inline-block;background-color: #808080;border:3px double white;border-radius: 50%; ;color:black;font-size:20px;font-weight:normal;text-align:center;cursor:help;"><i id="da2" style="display:none;width:150px;height:auto;background-color: #808080;border:3px double white; color:black;color:black;font-size:16px;font-color:black;padding:25px;" >hallo das ist der text der lang sein darf,und egal wie viel Text mann hier rein schreibt ,der Title kasten wächs auch mit.Notfalls kann man die width; und height: Werte noch auf den Text anpassen</i>i</span> <h1> Oder mit Verlinkung zur Seite X </h1> <span id="logo" onmouseover='document.getElementById("da3").style.display="blocK";'onmouseout='document.getElementById("da3").style.display="none";' style="width:24px;height:24px;display: inline-block;background-color: #808080;border:3px double white;border-radius: 50%; ;color:black;font-size:20px;font-weight:normal;text-align:center;cursor:pointer"><a href="http://www.google.de" style="color:black;"><i id="da3" style="display:none;width:150px;height:auto;background-color: #808080;border:3px double white; color:black;color:black;font-size:16px;font-color:black;padding:25px;" >hallo das ist der text der lang sein darf,und egal wie viel Text mann hier rein schreibt ,der Title kasten wächs auch mit.Notfalls kann man die width; und height: Werte noch auf den Text anpassen</i>i</a></span>