After doing some research, I came across a code that almost does what I need. The code allows me to hover over text and display a tooltip box with HTML content such as images and links.
It worked perfectly with jQuery, but the challenge is that eBay doesn't support jQuery, causing it to break. This means I have to find a solution using CSS instead.
Below is the code I have so far - it functions, but the issue is that the tooltip box appears wherever I hover, not just when I hover over the text. Additionally, the cursor no longer changes to the help symbol for some unknown reason.
I've created a JSFiddle for this (although the help cursor works there, indicating an issue with my longer code)
.tiptext {
width: auto;
font-family: 'ProximaNova', Helvetica;
font-weight: bold;
text-decoration: underline;
font-size: 14px;
color: rgb(39, 44, 45);
cursor: help !important;
position: relative;
}
.description {
border:1px solid #e3e3e3;
background: white;
width:auto;
max-width:275px;
height:auto;
padding:10px;
font-family: 'ProximaNova', Helvetica;
font-weight: 200;
color: rgb(39, 44, 45);
font-size: 13px;
top:29px;
left: 120px;
z-index:500;
opacity:0;
position:absolute;
-webkit-transition: opacity 0.9s ease-out;
-moz-transition: opacity 0.9s ease-out;
-ms-transition: opacity 0.9s ease-out;
-o-transition: opacity 0.9s ease-out;
transition: visibility 0s 2s, opacity 2s linear;
}
.tiptext:hover .description {
opacity:1;
-webkit-transition: opacity 0.1s ease-in;
-moz-transition: opacity 0.1s ease-in;
-ms-transition: opacity 0.1s ease-in;
-o-transition: opacity 0.1s ease-in;
transition: opacity 0.1s ease-in;
}
HTML
<div class="tiptext">Hover over me<div class="description" style="text-align:center;">and this box appears with full html support like links to <a href="https://www.google.com" target="_blank">Google</a><br>the problem is, this box also appears when you mouse over where it would be.</div></div>