Hello Dojo,

I am trying to create a scrolling text effect within a grid component using HTML and CSS. The text scrolls continuously from right to left. I want to display the same text as a tooltip when hovering over the grid.

Here’s the code I have so far:

<div class=”container”>
<span class=”text” title=”{String Column 2}”>{String Column 2}</span>
</div>
<style>
.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.text {
position: relative;
left: 0;
width: 100%;
padding: 0 0.5em;
font-size: 1rem;
color: #fff;
text-wrap: nowrap;
animation: flow 60s linear infinite;
}
@keyframes flow {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>

As recommender in the Style guide i’m using the title attribute : https://docs.dataminer.services/user-guide/Advanced_Modules/Dashboards_and_Low_Code_Apps/Low_Code_Apps/Style_guide.html?q=style%20guide

The problem I am facing is that when I hover the grid, if the text is visible on the grid it works just fine , but if the scrolling text isn’t visible on the grid i can see the HTML in the tooltip

Is there a way to force the display of the tooltip text regardless of the scrolling text’s visibility ? I would like the tooltip to always show the same text as the scrolling text, even when the scrolling text is out of view.

Any help or suggestions would be greatly appreciated. Thank you in advance!

Best regards,

Alexandre Bonnet