
jQuery 1.4.2 hover popup + PIE for shawdow box & border
Hello
Firstly, thank you for making this available.
I am working on a new asp.net 4 project in vs2010, I am using a jQuery function to handle displaying a hover when the mouse moves over some names in a gridview (linkbuttons/anchors when rendered).
The jQuery works perfectly.
I decided then to decorate the hover with rounded corners and a transparent shadow, easy enough in every browser but IE. Researching this brought me here and your fantastic offering.
I have 1 weird behavior, when I mouse over a name for the first time, the text of the hover is in the correct location, but the background is at the top of the page. This only happens when I utilize PIE.
Here is the code:
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// awesome code snipet from
http://blog.chapagain.com.np/jquery-a-simple-tooltip/ var tip = $("#tip");
$("a.tooltip").hover(function (e) {
// assign the <a> title to tip
tip.html($(this).attr("title"));
// empty <a> title
$(this).attr("title", "");
// set the position of tooltip and then display it
tip.css("top", (e.pageY + 5) + "px")
.css("left", (e.pageX + 5) + "px")
.css('display','block');
}, function () {
// hide tooltip
$("#tip").css('display', 'none');
// set the <a> title with tootip content
$(this).attr("title", tip.html());
});
});
</script>
<style type="text/css" >
#tip {
position: absolute;
border: 2px solid black;
background: #D9D7CB;
padding: 4px;
display: none;
-moz-box-shadow: 5px 5px 0px rgba(92, 92, 92, .5);
-webkit-box-shadow: 5px 5px 0px rgba(92, 92, 92, .5);
box-shadow: 5px 5px 0px rgba(92, 92, 92, .5);
border-radius: 5px;
behavior: url(/PIE.htc);
}
.hoverStyle
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family:Arial;
font-size:8pt;
color:black;
}
</style>
server side code fills the titles used for the formatted hover
'build some HTML to place in a hover popup with some basic demo/visit info
Dim HoverText As String
HoverText = "<table cellspacing='0' cellpadding='0' class='hoverStyle'>"
HoverText += "<tr><td style='font-weight:bold'>DOB:</td><td>" & e.Row.Cells(5).Text & "</td></tr>"
HoverText += "<tr><td style='font-weight:bold'>AGE:</td><td>" & e.Row.Cells(6).Text & "</td></tr>"
HoverText += "<tr><td style='font-weight:bold'>RACE:</td><td>" & e.Row.Cells(11).Text & "</td></tr>"
HoverText += "<tr><td style='font-weight:bold'>GENDER:</td><td>" & e.Row.Cells(10).Text & "</td></tr>"
HoverText += "<tr><td style='font-weight:bold'>PRIMARY:</td><td>" & e.Row.Cells(7).Text & "</td></tr>"
HoverText += "<tr><td style='font-weight:bold'>REFERRING:</td><td>" & e.Row.Cells(8).Text & "</td></tr>"
HoverText += "</table>"
If e.Row.Cells(1).Controls.Count > 0 Then
Dim btn As LinkButton
btn = e.Row.Cells(1).Controls(0)
btn.ToolTip = HoverText
btn.Attributes.Add("class", "tooltip") ' set the class for the linkbutton (rendered as an anchor) to use JQuery to handle the tooltip display
btn = Nothing
End If
only the first time I moouse over is when it renders in the top left.
If I don't use PIE (and have an ugly arse hover) .. it always displays properly even the first time.
I would LOVE to use this, if possible.
Thank you very much, let me know if you need anything more of me.
Jon