We help IT Professionals succeed at work.
Get Started

shopify (liquid) Java script help , please advice

magento
magento asked
on
801 Views
Last Modified: 2014-01-06
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
Comment
Watch Question
IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
This problem has been solved!
Unlock 1 Answer and 8 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE