Tooltip Position Issue

[Kasey]

What controls the position of the Tooltip in v4? I have an issue but it may be related to the master page. I have disabled modal for forms on a list. Tooltip positioning works fine until I scroll down. The more I scroll down on the page the worse the positioning gets for the tooltips. After I scroll down about 400 pixels the tooltips are lower than the viewable area. Any ideas? If I knew what controlled it I might be able to add some custom css to account for it.

[Alexander Bautz]

Hi,
The scrolltop is calculated from s4-workspace. If this is not in the page scrolling will throw the tooltip out of position.

You can override the function by adding this to the bottom of the DFFS_frontend_CEWP.js.aspx file – below DFFS_frontend.js:

<script type="text/javascript">
	spjs.dffs.showTooltip = function(elm){
		var id = $(elm).attr('fin'), p = $(elm).position(), s = $(window).scrollTop();
		if($("#s4-workspace").length > 0){
			s = $("#s4-workspace").scrollTop();
		}
		p.top += s;
		$("#tooltipHolder").html('').attr("pin","0").css({"position":"absolute","left":p.left+25,"top":p.top+15});
		if(spjs.dffs.fields[id]!==undefined){						
			$("#tooltipHolder").appendTo($(elm).parent());
			$("#tooltipHolder").html("<div style='padding:3px;'>"+spjs.dffs.data.tooltipObj[id]+"</div>").css({"position":"absolute"}).stop(true,true).fadeIn(200);
		}
	}

</script>

Alexander

[Kasey]

Thank you for the quick reply. I added the function but I am getting the same result.

[Kasey]

I changed the below and it is now working. Thank you!

if($(“#s4-workspace”).length > 0
to
if($(“#s4-workspace”).length < 0

[Alexander Bautz]

I’m glad you figured it out. The code I posted was the original one and you have to adjust it to fit your setup.

Alexander

[Kasey]

Is there something I can do to adjust the onclick? I got the hover working but the onclick still has the same positioning issue. Will these be addressed in your upcoming release? Thank you as always!

[Kasey]

I got this one working. I beutified the frontend js and was able to figure out a clickToolTip function to add to the front end aspx like the one you gave me for hover. Thank you.

[Jeffery McElroy]

I am working in SP 2013 and am having this same issue, but when I add the above script to the DFFS_Frontend_CEWP.html file below the DFFS_Frontend_min.js script, the tooltip does not appear on hover or on click. I tried changing “if($(“#s4-workspace”).length < 0” and still same result. Any help is appreciated.

[Author]

Posts