Link to home
Start Free TrialLog in
Avatar of magento
magento

asked on

shopify (liquid) Java script help , please advice

Hi,

This is an shopify ecommerce.

We trying to display name when mouse is taken over an image .

Its working below the thumbnail and we need to display it within the thumbnail.

Please check the attached images .

The js we are using is below.

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
  .tooltip {
	display:none;
	position:absolute;
	border:1px solid #333;
	background-color:#161616;
	border-radius:5px;
	padding:10px;
	color:#fff;
	font-size:12px Arial;
}
  
</style>

<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
 
$('.masterTooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo($(this))
        .fadeIn('slow').css({top:$(this).find("img").offsetTop , left:$(this).find("img").offsetLeft});
  
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
  //var mousex = e.pageX - 100; //Get X coordinates
  // var mousey = e.pageY - 100; //Get Y coordinates
  $('.tooltip').css({top:$(this).find("img").offsetTop , left:$(this).find("img").offsetLeft})
});
});

</script>

Open in new window


Thanks
needed-js.jpg
current-js.jpg
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

jQuery has an offset object you need to use unless you get the DOM object from the image

Demo

).mousemove(function(e) {
  var img = $(this).find("img"),top=img.offset().top, left = img.offset().left;
    $('.tooltip').css({top:top+100 , left:left+100}); // should be set after a timeout
  });

Open in new window

Avatar of magento
magento

ASKER

Hi ,

I copied your script but i getting the name of the 1st image in 2nd image.

Please see the screen

Thanks
js-coming-to--next-article.png
Please see my updated demo

http://jsfiddle.net/mplungjan/SR32E/

I do not understand what you have in your tipText, but data attributes must be all lowercase
Avatar of magento

ASKER

Hi ,

I still getting issues , kindly check my url .

http://www(dot)thesrk(dot)com/pages/artists-test

Open in new window


Thanks
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of magento

ASKER

Hi,

I did the changes still it shows like previous .

Please advice.

Thanks
Avatar of magento

ASKER

Thanks for ur help.

Changed the value to top:top-5, left:left-140 and this fixed the issue.

Its really a great help and appreciate it . Thank you very much.

I just noticed sometimes instead of text a black blur is showing .Please advice on that.
I do not get what this is supposed to do

        $(this).data('tiptext', title).removeAttr('title');

but if you do not remove it, you will lose your text