Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
317
Grid With Bubble Tooltip
posted

Hi All,

           I am using  Ultra Web grid. Single column. a web tab and asyn refresh panel contain the grid.

I'll Generate a Table for each Row for that single column,When Grid InitializeRow  event... I show a image

on that grid.... when mouse  move on the image, It shows  a Bubble tool tip using following code...

sDisplayLayout = "<style type='text/css'>a.tt{position:relative; z-index:0; color:#345FA4;font-family:Arial;font-weight:bold;font-size:11px;text-decoration:none;}a.tt span{ display: none;}a.tt:hover{ z-index:100; color: #345FA4; }a.tt:hover span.tooltip{display:block;position:absolute;top:0px; left:0;padding: 15px 0 0 0;color: #345FA4;text-align:justify;filter: alpha(opacity:90);KHTMLOpacity: 0.90;MozOpacity: 0.90;opacity: 0.90;}a.tt:hover span.top{display: block;padding: 30px 8px 0;background: url(images/bubble.gif) no-repeat top;}a.tt:hover span.middle{ /* different middle bg for stretch */display: block;padding: 0 8px; background: url(images/bubble_filler.gif) repeat bottom;}a.tt:hover span.bottom{display: block;padding:3px 8px 10px;color: #345FA4;background: url(images/bubble.gif) no-repeat bottom;}</style>"

 

Then call the classs

                    sDisplayLayout += "<a class='tt' href='#' border='0'><img src='images\select" + i.ToString + ".jpg' style='border-style:none'><span class='tooltip'><span class='top'></span><span class='middle'>" + sCms + "</span><span class='bottom'></span></span></a>"

 

Its working on IE Only..In Firefox part of  bubble tool shown another part hide...

 

Please Help me......