Page 1 of 1

Tool Messages not working in IE

Posted: Sun Jul 28, 2013 10:11 pm
by Pavilion
Hello:

I'm trying to create some popup help/tool messages. They should just pop-up when the user hover's over the anchored button. Following is my CSS

Code: Select all

/* ################ styling for popup messages (tooltips) ######### */
.toolMsg
{
display:none;
color:#754f31;
font-size:18px;
padding:5px;
background-color: #F1EDD7;
margin-left:60px;
border-radius: 5px; 
border:1px solid #754f31;
position:absolute;
}
.anchor:hover + .toolMsg{
display:block !important;
z-index:10;
}
And following is a sample html button that uses the above css

Code: Select all

<td><button id='submitLogEdits' class="navBttnRight anchor">Submit</button><p class='toolMsg'>Submit Edits</p></td>
This works fantastic in Firefox. When a user hover's over the button, then the popup 'toolMsg' shows just as expected.

Then I went to test it in IE and the message is not hidden, even though css is set as follows:

Code: Select all

.toolMsg
{
display:none;
... }
Any thoughts as to why display:none is not working in IE???
Thanks in Advance - Pavilion

Re: Tool Messages not working in IE

Posted: Tue Jul 30, 2013 3:43 pm
by mecha_godzilla
Hi,

What happens in IE if you remove the !important declaration? Perhaps the .toolMsg class is automatically inheriting the "display:block" property in IE browsers and overriding the "display:none" property.

Alternatively, take a look at the example on the following site:

http://www.menucool.com/tooltip/css-tooltip

This works in all my old browsers, so should hopefully work in IE without any problems.

HTH,

Mecha Godzilla