Solved

webpart mouseover/ tooltip

Posted on 2010-11-11
8
1,700 Views
Last Modified: 2012-05-10
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.
0
Comment
Question by:RohitRepu
8 Comments
 
LVL 42

Expert Comment

by:zephyr_hex
ID: 34122015
0
 

Author Comment

by:RohitRepu
ID: 34122210
Hi Zephyr,
sort of yes, except that i have text to display not images when hovered over.

thanks.
0
 
LVL 30

Accepted Solution

by:
Marco Gasi earned 400 total points
ID: 34133930
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
Complete Microsoft Windows PC® & Mac Backup

Backup and recovery solutions to protect all your PCs & Mac– on-premises or in remote locations. Acronis backs up entire PC or Mac with patented reliable disk imaging technology and you will be able to restore workstations to a new, dissimilar hardware in minutes.

 
LVL 30

Assisted Solution

by:Marco Gasi
Marco Gasi earned 400 total points
ID: 34134168
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
 
LVL 28

Assisted Solution

by:sybe
sybe earned 100 total points
ID: 34134308
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
 

Author Closing Comment

by:RohitRepu
ID: 34242770
thanks
0

Featured Post

Free book by J.Peter Bruzzese, Microsoft MVP

Are you using Office 365? Trying to set up email signatures but you’re struggling with transport rules and connectors? Let renowned Microsoft MVP J.Peter Bruzzese show you how in this exclusive e-book on Office 365 email signatures. Better yet, it’s free!

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Know what services you can and cannot, should and should not combine on your server.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now