Mouse over text on Icons

[P13119501]

is there a better way that writing a ton of CSS code to add mouse over effects to Icons to be compliant with ADA.  Need to be able to add printer icon and when user mouse over the icon it should say click here to print.  New to Design Studio.

[Former Member · Accepted solution]

Hi,

Give the button a class name in properties (lets call it here as "X"), then create new CSS file and write in it:

.X:hover:after{

                background: #FFFFFF;

                border:1px solid;

                border-color:#666666;

                border-radius: 5px;

                top: 60px;

                color: #333333;

                content: "Click here to print";

                left: 50%;

                padding: 5px 15px;

                position: absolute;

                z-index: 88;

                width: 150px;

                box-shadow: 1px 1px 3px #888888;

}

Most of the things I wrote is for design, the most important thing is the content.

Link your application with the CSS file you wrote, and you are done...

[Former Member · Accepted solution]

Hi Oday, very good solution. But if there's a way that when I click the button, the tooltip will gone? because my button will pop a menu, the tooltip is "hidden" some part of my menu, I tried some codes but didn't work out. Many Thanks if you have a good idea.