Let me start off by apologizing for any confusion in the wording of this question. I'm trying my best to be clear. Essentially, I have two goals:
- I managed to program a tooltip with a table into the question area of Qualtrics.
- I want the background color of each row to change when someone hovers over it.
I've achieved the second goal, but now I'm facing an issue where the background color is bleeding into the item response area. I can't figure out how to fix it. I've been going through the code repeatedly, and I feel like I might be missing something simple. The code I've used is below. Any assistance would be greatly appreciated. Thank you!
Javascript (in the header under Look & Feel):
.myExpandItem
{
text-decoration: underline;
position: relative;
}
.myExpandItem:hover .myExpandBox {
display: block;
}
.myExpandBox
{
position: absolute;
background: white;
opacity: 1;
border: 10px solid rgba(0, 0, 0, 0.3);
border-radius: 15px;
min-height: 200px;
min-width: 450px;
display: none;
left: 300px;
top: -375px;
padding: 10px;
color: black;
font-size: 12.000000pt;
font-family: 'Arial';
}
And here's the associated HTML code within the body:
<span style="font-size:16px;"><span style="font-
family:arial,helvetica,sans-serif;">To remind yourself of the
description for each area, hover over the link named BLAH below.
</span></span> <div><br>
<span class="myExpandItem"><div align="right">BLAH</div><span
class="myExpandBox">
<style type="text/css">
table {
overflow: hidden;
border-collapse: collapse;
}
td, th {
padding: 10px;
position: relative;
outline: 3;
}
tbody tr:hover {
background-color: lightblue;
}
</style>
<table style="background: white;border-radius:15px;-moz-border-
radius:15px;-webkit-border-radius:15px;">
<thead>
<tr>
<th class="col"><h4>Area</h4></th>
<th class="col"><h4>Description</h4></th>
</tr>
</thead>
<thead>
<tr>
<td colspan="2"><hr></td>
</tr>
</thead>
<tbody>
<tr>
<td>ITEM 1</td>
<td>DEFINITION.
</td>
</tr>
<tr>
<td>ITEM 2</td>
<td>DEFINITION.
</td>
</tr>
<tr>
<td>ITEM 3</td>
<td>DEFINITION.</td>
</tr>
</tbody><tbody>
</tbody></table>
</span>
</span>
When hovering over the item response area, you'll notice that the light blue background "bleeds" over. Your help is highly valued. Thank you in advance for any assistance provided.