모든 브라우저에서 Qualtrics의 Matrix 문 안에 HTML 툴팁을 삽입 할 수 있습니까?

Question

이것은 내 첫 번째 게시물입니다.이 질문이 구체적이지 않은 경우 사과드립니다. 저는 어린 십대가 때로는 Qualtrics (대부분의 항목이 매트릭스 스타일 질문에 포함되어 있음)에서 긴 설문 조사를 작성하고 있습니다. 질문에 때때로 혼란스러운 말씨가 포함되기 때문에 질문에 대한 추가 컨텍스트를 제공하기 위해 HTML로 된 툴팁을 만들었습니다. 따라서 질문에 혼동을 줄 수있는 젊은 응답자가 물음표 아이콘 위로 마우스를 가져 가면 원하는 추가 정보를 얻을 수 있습니다.

현재 설문 조사에는 몇 가지 도구 팁이 있습니다. 때로는 도구 팁이 행렬의 "질문"섹션 (즉, 행렬 맨 위에있는 quesion 텍스트)에 삽입되고 때로는 도구 설명이 행렬 중 하나에 삽입됩니다 (즉, 행렬의 왼쪽에있는 문장).

내 문제는 다른 도구 설명에 대해 똑같은 코드를 사용하는 경우에도 Internet Explorer 및 Safari를 사용할 때 행렬의 질문 섹션에있는 코드 만 스팬 제목을 표시한다는 것입니다. 그러나 Chrome을 사용할 때 두 가지 유형의 도구 설명은 호버린 텍스트를 표시합니다. 그래서, 내 질문은, 거기에 관계없이 사용되는 브라우저의 표시 스팬 제목을 얻을 수있는 방법은 무엇입니까?

저는 HTML에 익숙하지 않으며 왜 이런 일이 일어나는지 확실하지 않습니다. 다른 사람들이 시도 할 수있는 미리보기 설문 조사와 함께 아래 도구 팁을 작성하는 데 사용한 HTML을 포함 시켰습니다.

미리보기 설문 조사 링크 : 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> 

. 정말 고마워!

Answer 1

편집 설문 조사 -> 모양과 느낌 -> 고급 -> + 사용자 정의 CSS

.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'; 
} 

그런 다음 질문 HTML을 편집하고 마우스 오버 툴팁 원하는 위치에 귀하의 질문에 텍스트에이 HTML을 추가하려면 추가 :

샘플 텍스트 약 <span class="myExpandItem">some kitten<span class="myExpandBox">A Kitten is a cute animal!</span></span> 우리 모두가 좋아하는!