I’ve successfully added tooltips to each off my 7 statements in a matrix table using the following code:
<style type="text/css">/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 700px;
background-color: black;
color: #fff;
text-align: left;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">tooltip title<span class="tooltiptext">description </span></div>
However, I now want to add a horizontal divider to between the 5th and 6th statements, but adding it at the end of my code does not allow for a functioning code, presumably due to conflicting style statements:
<style>
.Matrix table{border-collapse:collapse !important;}
tr.ChoiceRow.bottom{border-top: 2px solid black;}
</style>
I’m not well versed in CSS so any help on how to resolve this/where to put the code for the divider would be helpful! Thanks in advance!