When i place my mouse on card item i need to see info icon on Right side as shown in picture.. How to fix this problem...?
it would be great help if anyone provide answer
Thank you
Hello
I have applied Css and JS mouseover function to show/hide the icon
Css Code Snipet
.Icon_Wrapper{ display: none; } .card.card-detail.CardHover:hover { border: 2px solid black; }
.Icon_Wrapper{ display: none; }
.card.card-detail.CardHover:hover { border: 2px solid black; }
Js is attached on OnReady Event of Screen
I am attaching a sample Oml that might help
Sample
I hope this helpsBest RegardsTousif Khan
Hi Tousif,
Thanks its working.
Hi, Tousif,
I am an Outsystems newbie and I am trying to re-purpose your example to act on menu items in LayoutSideMenu. I cannot figure out how to access the element id as a js input (where you have Card.id). I would be grateful if you are able to help.
You can use the Tooltip component
Hi ,
You can use tooltip to show the content as an overlay.
You can check it here hope that will help.
cheers
Hi Rohan,
Thanks for reply but not exactly tooltip. Im using block in that on Right side place holder being used. whenever i place my mouse over block in that exactly right side place holder i need to show info icon and then for info icon i have something to show for that i will use tooltip.
thanks.
Hi,
I believe that you can achieve by using css.
When you mouse over on that section/block you have to enable the icon and when that icon enable then you can use the tooltip over that icon when it is enable.
Imteresting that you raise this I noticed the mouseover/onhover events on the webblock were not triggering on something I was building the other day. I assumed I was doing something wrong but as you are seeing something similar it might be worth raising a support ticket. If you aren't in a position to raise support tickets let me know and I will raise one against one of our client platforms.
To display content on mouseover in a reactive web app, utilize CSS's :hover selector to control visibility. Create a CSS class with display: none;, and use display: block; when the element is hovered. Incorporate this class into the HTML elements you want to trigger content display. For reactive web app development, employ JavaScript to enhance interactivity. Bind a mouseover event to the targeted element and modify its content visibility through DOM manipulation. These techniques ensure content is shown dynamically upon mouseover in a reactive web app. For more advanced scenarios, consider exploring libraries and frameworks for streamlined react native app development.