Html - Removing transparency on tooltips

UNIX for Beginners Q & A
1

I want to use the tooltip in html, however the tranparency is creating problem for detailed tooltips as the text from the back interferes with the readability of the tooltip text.

I have done the following changes, however the normal tooltip es still transparent

I call it using

    <a style="color:blue;"
      href="mailto:info-gnu-request@gnu.org?Subject=subscribe"
      ><span style="font-size:18px;" title="per iscriversi
          alla lista info-gnu@gnu.org." >test</span></a>

<style type="text/css">
<!--
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #ffffca;
  color: black;
  text-align: center;
  padding: 8px 8px;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  position: absolute;
  z-index: 1;
}

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

.tooltip.in {
  opacity: 1 !important;
}
-->
</style>
2

Try:-

<body>
    <div class="tooltip"><a style="color:blue;" href="mailto:info-gnu-request@gnu.org?Subject=subscribe">Test</a>
        <span class="tooltiptext">per iscriversialla lista info-gnu@gnu.org.</span>
    </div>
</body>
3

Yes, that works, but then a tried to add opacity: 1 to the normal tooltips and never managed to get a solid background color.

4

Did you try changing the background-color in CSS ?