Displaying a new image/window with PHP variables when you rollover an image

Question

When I first asked how to achieve something like this: http://backpack.tf/ (Mouse over on any item) I got pointed to JQuery.

Then I tried achieving the same by using; http://jqueryui.com/tooltip/

I was able to create the window but I couldn't figure out how to set it up so that it displays $object->level or some other variables like that.

I than tried; http://stevenbenner.github.io/jquery-powertip/

Again I was able to create the tooltip. And it lets you create tooltips using the data-powertip="" tag. Like this;

<a href="/some/link" data-powertip="<table id='popup'><tr><td>Name</td><td>&nbsp;</td></tr><tr><td>Price</td><td>&nbsp;</td></tr></table>">Some Link</a></div>

But still, I can't place my variables in there. I'm using echo to print this into HTML body and all the quotation marks start to be a problem.

Please help me with this. How to create eye-candy tables like when you hover on an item in this page: http://backpack.tf/

Answer 1

you may need to escape your quotes.

For instance,(assuming your tooltip plugin works by showing some data from an attribute), try this: Make your html element use double quotes for attribute like(assuming it uses data-tooltip for tooltip data, you need to change that to whatever your plugin uses.)

<img data-tooltip="your data will go here" ... >
                  ^                      ^
               Used double quotes for attribute

you would be echoing that from php using single quotes because you have double quotes there, like:

echo  '<img data-tooltip="your data will go here" ... >';

Now your problem is you need to put html inside that attribute, fortunately you can use single quotes for html attributes too but unfortunately you also used single quotes to echo from php.

What you need to do is escaping the inner quotes! like:

echo '<img data-tooltip="<span class=\'some-css-class\'>Some Text '.$somePhpVariable.'</span>" ....>';

you escape your quotes with backslash. You will see that stackoverflow code highlighter will highlight the above code properly.