webpart mouseover/ tooltip

Hi,

I have a dataviewer webpart which shows data from splist. One of the columns in the dataviewer webpart has an image in it and when you put your mouse tip on it, it should open a div as a pop up and show the list items in an html table.
I could use flash or silverlight to make ithe mouse tool tip/mouse over pop up look fancier.

Could you please provide any step-by-step procedure to do it?

Thanks,
Rohit.
RohitRepuAsked:
Who is Participating?
 
Marco GasiConnect With a Mentor FreelancerCommented:
Hi, RohitRepu. You could use this to get this effect. First create a div for html table:

CSS
#htmlTable{
  //put your style attributes here
}

In html file write this:

HTML
<div id="htmlTable" style="display:none;">
  put here your code
</div>

This div will be invisible. To your links which has to have hover effect give a class name such 'class='mylink' in order to allow a reference for jQuery.

Now we have to customize javascript code (see snippet below).

I've not tested I use prototype and scriptaculous)ù not jQuery) but I think it could work.

Let me know.
Cheers
function tablePreview(){
	    $("mylink").hover(function(e){
	        var obj = $("htmlTable");
	        var offset = $(this).offset();
	        var winHeight = $(window).height();
	        var winWidth = $(window).width();
	        var scrollLeft = $(window).scrollLeft();
	        var scrollTop = $(window).scrollTop();
	        var objHeight = obj.outerHeight();
	        var objWidth = obj.width()+15;
	        if(((winWidth+scrollLeft)-offset.left)<objWidth){
	            offset.left=((winWidth+scrollLeft)-objWidth);
	        }
	        var maxHeight = (winHeight+scrollTop)-offset.top;
	        if(objHeight>maxHeight){
	            if(offset.top-scrollTop>objHeight){
	                offset.top=offset.top-objHeight-20;
	            }
	            height = (objHeight<winHeight)?objHeight:winHeight;
	        }
	        obj.css({"position":"absolute","top":(offset.top+20)+"px","left":offset.left+20})
	        .fadeIn("fast");
	    },
	    function(){
	        $("htmlTable").remove();
	    });
	};

	// Call the script on page load
	$(document).ready(function(){
	    imagePreview();
	});

Open in new window

0
 
zephyr_hex (Megan)DeveloperCommented:
0
 
RohitRepuAuthor Commented:
Hi Zephyr,
sort of yes, except that i have text to display not images when hovered over.

thanks.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Marco GasiConnect With a Mentor FreelancerCommented:
I'm sorry, I forgot to specify that I have used code shown in link posted by zephyr_hex. So you have to use jQuery. I post complete code to insert in the head of your page for javascript.

Cheers
<script type="text/javascript" src="../../Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

function tablePreview(){
	    $("mylink").hover(function(e){
	        var obj = $("htmlTable");
	        var offset = $(this).offset();
	        var winHeight = $(window).height();
	        var winWidth = $(window).width();
	        var scrollLeft = $(window).scrollLeft();
	        var scrollTop = $(window).scrollTop();
	        var objHeight = obj.outerHeight();
	        var objWidth = obj.width()+15;
	        if(((winWidth+scrollLeft)-offset.left)<objWidth){
	            offset.left=((winWidth+scrollLeft)-objWidth);
	        }
	        var maxHeight = (winHeight+scrollTop)-offset.top;
	        if(objHeight>maxHeight){
	            if(offset.top-scrollTop>objHeight){
	                offset.top=offset.top-objHeight-20;
	            }
	            height = (objHeight<winHeight)?objHeight:winHeight;
	        }
	        obj.css({"position":"absolute","top":(offset.top+20)+"px","left":offset.left+20})
	        .fadeIn("fast");
	    },
	    function(){
	        $("htmlTable").remove();
	    });
	};

	// Call the script on page load
	$(document).ready(function(){
	    imagePreview();
	});
</script>

Open in new window

0
 
sybeConnect With a Mentor Commented:
pure css is the nicest solution: http://psacake.com/web/jl.asp

If you insist on javascript, don't use jquery, it only complicates things.
0
 
RohitRepuAuthor Commented:
thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.