Est-il possible d'insérer une info-bulle HTML dans Matrix Statements dans Qualtrics sur tous les navigateurs?

Question

Ceci est mon premier message, alors excuses si cette question n'est pas assez spécifique. Je suis en train de créer une longue enquête dans Qualtrics (dont la plupart des articles sont contenus dans des questions de style matriciel) qui seront parfois prises par de jeunes adolescents. Comme les questions posées contiennent parfois des termes confus, j'ai créé des infobulles en HTML pour donner un contexte supplémentaire aux questions, de sorte que les répondants plus jeunes qui pourraient être déroutés par le libellé puissent survoler un point d'interrogation pour obtenir des informations supplémentaires.

Actuellement, il existe plusieurs conseils d'utilisation dans le sondage. Parfois, l'info-bulle est insérée dans la section "Question" de la matrice (c'est-à-dire le texte de la quetsion en haut de la matrice), et parfois, l'info-bulle est insérée dans l'une des déclarations sur le côté gauche de la matrice). Mon problème est que, même en utilisant le même code exact pour les différentes astuces, seulement ceux qui se trouvent dans la section des questions de la matrice montrent le titre de l'étendue lorsque vous utilisez Internet Explorer et Safari. Toutefois, lorsque vous utilisez Google Chrome, les deux types de conseils affichent le texte du survol. Donc, ma question est, y at-il un moyen d'afficher le titre du span quel que soit le navigateur utilisé? Je suis très nouveau au HTML et je ne sais pas pourquoi cela se produit. J'ai inclus un aperçu de l'aperçu à essayer pour les autres, ainsi que le code HTML que j'ai utilisé pour créer l'infobulle ci-dessous.

Preview Survey Lien: https://co1.qualtrics.com/jfe/preview/SV_025DzNles8BNYQR

HTML:

Test&nbsp;<span title="Hoverover text."> 
<img src="https://qualtrics.com/(//this is the file path of the question mark icon uploaded to Qualtrics)" style="width: 15px; height: 20px;"/></span> 

Tout conseil serait grandement apprécié. Merci beaucoup!

Answer 1

Modifier l'enquête -> Look and Feel -> Avancé -> + Ajouter CSS personnalisé

.myExpandItem 
{ 
    text-decoration: underline; 
    position: relative; 
} 

.myExpandItem:hover .myExpandBox { 
    display: block; 
} 

.myExpandBox 
{ 
    position: absolute; 
    background-color: rgba(0,0,0,0.8); 
    min-height: 50px; 
    width: 250px; 
    display: none; 
    left: -30px; 
    top: 14px; 
    padding: 10px; 
    color: white; 
    border-radius: 15px; 
    font-size: 9.000000pt; 
    font-family: 'ArialMT'; 
} 

Vous pouvez alors modifier le code HTML de question et ajoutez ce code HTML dans votre texte de la question où vous voulez que le vol stationnaire au-dessus de l'info-bulle:

Exemple de texte sur <span class="myExpandItem">some kitten<span class="myExpandBox">A Kitten is a cute animal!</span></span> que nous aimons tous!