If it’s a small text that is always the same, use CSS, something like this scss:
.hoverclass {
position: relative;
&:hover:after {
content: "Your message here \A with a new line like this";
position: absolute;
white-space: pre;
text-align: left;
top: 40px;
left: -1px;
z-index: 99;
overflow: visible;
padding: 4px 8px;
border: 1px solid #a94442;
color: #8e1116;
background-color: #fbd2d3;
border-radius: 2px;
}
}
If you want more or dynamic content, build the popup content in a container with a different class directly behind your class and use CSS to hide/show that container, something like this scss (change “hoverclass” and “containerclass” as needed):
.hoverclass {
~ .containerclass:not(:hover) {
display: none;
}
~ .containerclass:hover {
display: block;
position: absolute;
z-index: 999;
}
&:hover {
~ .containerclass{
display: block;
position: absolute;
z-index: 999;
}
}
}
You may need to configure your own styling, but you get the idea.
If you want to show/hide a modal popup, I wouldn’t know how to do that.
if your using a data grid you can find the option to have a tooltip page like the bellow :
and if not a data grid I don’t know if that helpfult you can download from the marketplace a tooltip widget that will be helpful for you