Forums

Tooltip not changing color using tutorial

bstrydom 19 Jul, 2015
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
GreyHead 20 Jul, 2015
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
bstrydom 20 Jul, 2015
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.
GreyHead 20 Jul, 2015
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
bstrydom 20 Jul, 2015
Yup! I have been struggling with this since last night!😟
bstrydom 20 Jul, 2015
So, Just checking, are you saying that there is no solution to this? am I "screwed"?
GreyHead 21 Jul, 2015
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
bstrydom 21 Jul, 2015
I have PM'd you details🙂
GreyHead 21 Jul, 2015
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
bstrydom 21 Jul, 2015
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?
GreyHead 21 Jul, 2015
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
bstrydom 21 Jul, 2015
Briliant! It's working. But how do we change the information tooltip as well?
GreyHead 21 Jul, 2015
Hi Brett,

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

Bob
This topic is locked and no more replies can be posted.