Do you have a demo or the code?

Hi Jacob,

the working demo i found is here : http://www.scriptol.com/css/tooltip.php

the page where i tried to implement it is here : http://www.allocking.com/nl/producten/toegangscontrolesystemen/so240144-dual-deur-controller

on the last link, it's on the bottom in "bestelnummers" on the black block next to "SO240144" in the table.

Have you tried to remove the template cache? The only CSS files I see are:

• /frontend/core/layout/css/jqueryui/jqueryui.css
• /frontend/cache/minified_css/fef508f337b38591df6ac7a73e1900af.css

i just tried and now it f*cked up my template on the frontend.. #damnit

I see, that's because there is a lot of inline CSS. For instance:

body {
    padding:30px;
    font:normal 12px/1.5 Arial, sans-serif;
}

This changes your whole style by adding white space around your website.

ah ok fixed the CSS issue.. but the hover/tooltip thing is still not working :(

I get the following error with Firebug:

ReferenceError: jQuery is not defined
jQuery(document).ready(function ($) {

hm, strange because if you check head.tpl i see

{* HTML5 Javascript *} <script src="{$THEME_URL}/core/js/kleurke.js" />

The problem is that it is loaded before jQuery, this is located in the footer

can't manage to switch it :-/.. it looks like i'm a dork now, i know,lol. but it's really hard to find my way in fork ... :-/ ..

Place your kleurke.js in footer.tpl and remove the cache again.

it's probably me f*cking it up but i've changed it and it doesn't make sense.. still not working. and yes i cleared the caches..

Hmm maybe it isn't the footer.tpl? I still see the kleurke.js in the header.

Look in your .tpl files where the Javascript is loaded, look for code like this:

{iteration:jsFiles}
    <script src="{$jsFiles.file}"></script>
{/iteration:jsFiles}

found it, was in "home.tpl" although i think then it's not for all pages i've tried and pasted it on top of the page (above the body-tag) and now the website is totally f*cked up.. menu is gone and stuff.. lol.

Firebug says :

"ReferenceError: jQuery is not defined jQuery(document).ready(function ($) {"

and "TypeError: $(...).tooltip is not a function open: function () {"

Why place it above the body tag?

Just place it under the code I gave you, I think that it will solve the problem.

done but now the home page is f*cked up, the code is on the right place. if you check the other pages, the ones that not use home.tpl, it's ok. the footer is messed up too. .. and yes, the cache has been cleared..

Why your footer is messed up, I don't know. But I know that your kleurke.js is stil in the header on the other pages. To fix this use the same method as you did on the homepage.

Try to not put your javascript file inside the {iteration:jsFiles} but right underneath it. If I look at your homepage code, I see kleurke.js repeated 4 à 5 times.

About the homepage layout being broken, did you add extra css files? Can you enable debug mode for a short while, so caching is disabled and the css isn't compiled into one minimized version so looking for errors in the css is easier.

Hi Jesse,

Indeed, the script also comes with a bit of CSS to make the "tooltip"-thing look nice. To make it easy i've added the lines of CSS to the screen.css file so it's still all in one file.

i've put the JS now outside the iteration line and indeed now it's not there for 5 times anymore.. but i now get again "jQuery is not defined" in Firebug..

the weird part is that only my homepage is f*cked up so badly.. the others is just the footer that's messed up.

Did you remove the js & css because I don't see it anymore :) ? The broken homepage is probably because of the new css. If you try again, I can take a look what css is causing the problem. Oh and now there's a "@" somewhere in the footer, if you remove that the footer won't be pushed down

@Jesse : yes, I've been twittering with Dieter Wyns this morning and he couldn't find his way through my fucked up code anymore, so i just removed the theme and installed it again.. fixed a lot but not everything as you already suggest.

And indeed, i was trying to get rid of everything (before getting in touch with Dieter) to narrow down the issues and see where it ran faulty..

Now working with jQueryUI tooltip function in a other document to see if i can get one to work as i want it.. and then back to implementing ... but i'm desperate already,lol!

Oh. I think Bootstrap tooltip works very good. Only download the tooltip.js (and some css). Or one of these fun tooltips

awesome,thx.

Actually, what i really need is a tooltip that shows an image. it's to display a product in a certain color. for example, if you hover the red square, the tooltip pops up with a red car in it...

"that's" it.. nothing more nothing less.. but i'm really not good in "custom coding" in fork .. so been struggling damnhard with this :-/

If you add the js & css code, you'll need some way to activate them. If you have different links on your page (link points to the red car image), you can use javascript to add a tooltip to those specific links (be specific in your selector so not all the links on the page will have tooltips). You can also try to add a classname to your links, for example 'tooltip'. You can add a class by adding a.tooltip { /* nothing */ } to your css. Then it will appear in the styles dropdown in the editor. That's how I mostly add a class to an element

so i now have it working OUTSIDE of fork, with multiple (2 for now) colors.. http://www.allocking.com/tooltip/

but when i tried to implement it in fork .. i don't get any errors anymore, but it just doesn't work :(

Can you show me a page where it doesn't work? Maybe i can see what's wrong

SOLVED. changed the script. and took another attribute, and used a Switch/Case instead of if/else and all of a sudden it was working ... finally. lol :)

thanks !

Great :)