Adding tooltip AND horizontal divider in matrix question | XM Community
Skip to main content

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!

@VTsurveys Are you using Simple Layout? Use Flat or Classic, it will be easier to code or find support content in here. Your code will work with Flat and Classic Layout.

@Nam Nguyen that’s good to know! Unfortunately I can’t use Simple Layout because my organization has a set theme I use for surveys :/

@VTsurveys It’s hard to navigate the simple layout but I finally found the element. Here’s the code, add it in JavaScript of the question. If it target the wrong row, just change the nth-of-type(6) number

Qualtrics.SurveyEngine.addOnload(function() {
    var gridGroup = document.querySelector('.matrix-row:nth-of-type(6) .grid-group');
    var statementHeader = document.querySelector('.matrix-row:nth-of-type(6) .matrix-statement-header');

    if (gridGroup) {
        gridGroup.style.borderTop = '2px solid black';
        gridGroup.style.marginTop = '10px';
    }

    if (statementHeader) {
        statementHeader.style.borderTop = '2px solid black';
        statementHeader.style.marginTop = '10px';
    }
});

 

Leave a Reply


Terms & Conditions