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
Hi Alexandre,
I don't know if this is a good solution, but putting another span around your div works for me:
<span title="{String Column 2}"><div class="container">
<span class="text">{String Column 2}</span>
</div>
</span>
<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>
Best regards,
Felix
![](https://community.dataminer.services/wp-content/uploads/wp-user-manager-uploads/2024/01/blob_https___teams.microsoft.com_3f3eb54d-6090-46b2-ab70-8ea7b4060cb3.jpg)
Nice to know, thanks.
Glad to hear that it works.
Br,
Felix
Hello Felix,
Thank you for your answer it works just fine !
Another solution was to add the pointer-events: none; in the div if you dont want any tooltip at all.
Best regards,
Alexandre