Woocommerce product hover tooltip

Frederik1988

I have a woocommerce store and on my archive pages I want to hover over the product and have a minimilised view to come up like a tooltip. The hover feature must follow the mouse, and the content that are displayed must be dynamic (pulled from jSON feed).

This is my test store where the products are displayed: http://1clickhere.co.za/testing/affilionaires2/

This is what I want the feature to look like and do (see how it follows the mouse): http://jsfiddle.net/JVDFc/

However, I've just started learning jQuery. So my knowledge is limited. Can someone help and guide me put this together? And what is the easiest way?

As I was Googling for answers, I came across lots of bits and pieces and I don't know how to glue it all together. The tooltip popup must only display the title, price, description, rating, category and buy button... for that specific product.

Since I have 70+ products, I don't want to go and create these tooltips manually. That's why I want the content to be dynamic.

Can anyone please help?

Aug 4 '17 #1

Subscribe Post Reply

1593

Similar topics

ToolTip Class

by: Dennis | last post by:

I have implemented the ToolTip class for a user control that inheirits from the panel. I show different tool tips depending on where the mouse is on the control when the hover event occurs. ...

Visual Basic .NET

DataList Row ToolTip

by: rn5a | last post by:

A DataList displays 3 columns - Product, Category & Price. These columns are populated with records from a SQL Server 2005 DB table. Apart from the above 3 DB columns that the resultset retrieves,...

ASP.NET

Tooltip only shows once

by: =?Utf-8?B?cGV0ZTE5Njk=?= | last post by:

I use Visual Studio 2005 and created a very simple Form with one button. I added a Tooltip for that button. It shows fine the first time I hover over that button. But if I let it disappear by the...

C# / C Sharp

Displaying large text in combo/list box as hover/tooltip text

by: LaksM | last post by:

Hi, I need to create a combox/listbox with certain fixed width. In that I need to display large text. I can use Hscroll for list box. But, is there a way to display the text as tooltip/mouse over...

.NET Framework

Why is the Tooltip Bug Still not Fixed in VS2008?

by: Charles Law | last post by:

I have to take this personally now. Tooltips have been flakey since the dawn of .NET, but to still have to put up with a disappearing tooltip in VS 2008 is getting beyond a joke. Tooltips have...

.NET Framework

Tooltip or simple test script not work

by: freddukes | last post by:

Okay... So this is my first project and I want to be able to make a tool tip appear with the basket contents whenever you hover over a link using the onmousehover='javascriptFunction()'. I have...

Javascript

display larger image on hover and stay inside viewport

by: Mike Kypriotis | last post by:

So i found this script which does exactly what i want http://cssglobe.com/lab/tooltip/02/ (downloaded from its homepage at http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/) only...

Javascript

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing