Here are some code that uses a tooltip that gets more than its element, so it does not popup below And forces the user to scroll to see it. It works fine in all browsers other than IE, in IE it is located below instead of above element.
How can I fix a situation error with IE? Im stumped
& style; Style = "text / css" & gt; .ToolTip {border: 2px solid black; Background: #fff; display none; Padding: 10px; Width: 325px; Z-index: 1000; -moz-border-radius: 4px; } & Lt; / Style & gt; & Lt; Script language = "javascript" type = "text / javascript" & gt; $ (Document) .ready (function () {$ (".tip_holder"). Hover (function () {var $ containerwidth = $ (this) .with (); var $ offset = $ (this) .offset () ; $ ('# ToolTipPopUp') .prepend ('& lt; div id = "tooltip" class = "ToolTip" & gt;' + $ ("# ToolTipHolder"). Text () + '& lt; / div & Gt; ''; Var $ tipWidth = $ ('# tooltip') Width (); var $ tipHeight = $ ('# tooltip') height (); $ ('# tooltip'). CSS ({'top': $ Offset top - $ ($ tip height + 15), 'left': $ offset.left - ($ tip width - $ container width) / 2, 'position': 'full', 'display': 'block'} )}}, Function) {$ ('# Tooltip'). Remove ();});}); & Lt; / Script & gt; & Lt; Img src = "/ content / images / WhatsThis.png" class = "tip_holder" /> & Lt; Div & gt; & Lt; Div id = "ToolTipPopUp" & gt; & Lt; / Div & gt; & Lt; Span id = "ToolTipHolder" style = "display: none;" & Gt; For Visa, MasterCard and Discover, the card verification number is a 3-digit security code that is printed on the back of your card. & Lt; Br / & gt; & Lt; Br / & gt; For American Express, card verification number is 4 digits and appears in front of the card. After the last four digits of your account number, the number appears on the signature bar. & Lt; / Span & gt; & Lt; / Div & gt;
IE will make you mad if you do not use javascript to solve the problem You can use it or you can use conditional statements to use a different stylesheet for IE like this:
Comments
Post a Comment