Hover text display | XM Community
Skip to main content
!

!

!

!

I'm not sure why the text couldn't be displayed properly,please see the below HTML



Our board and executive committee recognize that the digital dragons

<div class="tooltip1"><img src="https://cathayaresearch.au1.qualtrics.com/CP/Graphic.php?IM=IM_afPMXhXxtglVBsx" style="width: 12px; height: 14px;" />

<div class="tooltiptext1"><b>ROLLOVER DEFINITION:</b><br />

Gartner defines a Digital Dragon as an organization beyond even a conventional IT giant.

<ul>

<li>A Dragon is a large company with hyperscale technical platforms that offers leading edge services in AI, Internet of Things etc., and orchestrates digital ecosystems.</li>

<li>A Dragon plays multiple roles beyond IT provider such as payments, logistics and sometime competes in industries like banking and retail.</li>

<li>Each organization must identify their own dragons, but companies like Alibaba, Amazon, Google and Tencent are often candidates.</li>

</ul>

</div>

</div>

having an increasing impact on all industries

<style type="text/css">.tooltip1 {

position: relative;

display:inline-block;

}



.tooltip1 .tooltiptext1 {

visibility: hidden;

width: 600px;

background-color: black;

color: #fff;

text-align: left;

border-radius: 6px;

padding: 5px 0;

position: absolute;

z-index: 100;

top: 150%;

left: 50%;

margin-left: -300px;

padding:10px;

}



.tooltip1 .tooltiptext1 ul{

display:block;

}



.tooltip1 .tooltiptext1::after {

content: "";

position: absolute;

bottom: 100%;

left: 50%;

margin-left: -5px;

border-width: 5px;

border-style: solid;

border-color: transparent transparent black transparent;

}



.tooltip1:hover .tooltiptext1 {

visibility: visible;

}

</style>
Hello @Cathaya ,



Try using/implementing this

Leave a Reply