Tooltip not changing color using tutorial

Hi,

My form Link: http://test.nuwelewetygerberg.org.za/index.php/af/kontak-ons

I am following this tutorial to change the color of the error tooltip.

http://www.chronoengine.com/faqs/70-cfv5/5242-how-can-change-the-required-asterisk-and-the-tooltip-layout.html

However, When applying the following CSS straight from the tutorial in the Load CSS action, the colors are not taking affect at all.

.gtooltip .gvalidation-error-tip {
  background-color: #4242ff !important;
  border: 1px solid #00f !important;
}
.gvalidation-error-tip .gtooltip-arrow-border {
  border-color: #00f transparent transparent transparent !important;
}
.gvalidation-error-tip .gtooltip-arrow {
 border-color: #4242ff transparent transparent transparent !important;
} 

Please can someone assist?

Thanks
Brett

Hi Brett,

The CSS on your page doesn't appear to be the same as the CSS in the FAQ. If I add the FAQ CSS then the tooltip color does change.

Bob

That's cause I was trying to get it to work and fiddling around.

You can look now again. I have reapplied the above settings and the CSS is still the red/pink colors.

Hi Brett,

I've looked at this for a while now and I don't see why the CSS isn't being applied - in Chrome the selectors look correct but the CSS for the tip body isn't showing when I look at that div :-(

Bob

Yup! I have been struggling with this since last night!😟

So, Just checking, are you saying that there is no solution to this? am I "screwed"?

Hi Brett,

I'm sure that there is an answer - something about your HTML/CSS is preventing the custom CSS from being applied. I have no idea what that is. When I add the custom CSS in my browser web developer tools it works OK. I can see it in the page HTML - but not being applied to the tooltip elements. When I test on my site it works OK.

By all means PM me the site URL, the form name, and a SuperAdmin login and I'll take a quick look - but I'm not sure that, at root, this is a ChronoForms problem.

Bob

I have PM'd you details🙂

Hi Brett,

I made a copy of your form and got that working. After some trial and error I changed the CSS selector for the tip body to

.gvalidation-error-tip {
  background-color: #4242ff !important;
  border: 1px solid #00f !important;
}

I also added a line to the JavaScript to require Joomla! to load jQuery a bit earlier.

Bob

Ah great!🙂 So when you say this "I also added a line to the JavaScript to require Joomla! to load jQuery a bit earlier." are you saying there might have been a small enhancement that you made to prioritise the chronoform over joomla template conflicts?

Hi Brett,

When I created my copy form and checked there was a JavaScript error on the page 'JQuery not found' and the tooltips were not showing at all.

I altered the JavaScript in the form to add the line JHtml::_('jquery.framework'); which is the Joomla! command to load jQuery and that resolved the JS errors.

Bob

Briliant! It's working. But how do we change the information tooltip as well?

Hi Brett,

This seems to do it

.gtooltip {
  background-color: #4242ff !important;
  border: 1px solid #00f !important;
}

Bob