Forums

Hi all,

Hope someone can assist. with this (maybe minor but) elusive issue.

Environment:
===============================
1) Joomla 2.5.4 on WAMP
2)Chronoforms componant 4 RC3.3

Issue:
================================
1) form created fine
2) ? link replaced by custom icon fine
3) Tooltip partially modified/styled by means of information in the following tread: http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=26&t=71589

My problem is, as with spaceodissey in the tread. How do you style the rest of the tooltip?
What i have now when i hover the tooltip is:

How do i style the yellow inner part?

The css code i m using is af follows:

div.tooltipbox{
	z-index: 9999;
	width: 150px;
	background-color: #f6f6f6;
	border: 8px solid #eeeeee;
	padding: 8px !important;
	text-shadow: 0 1px 0 #fff;
	display: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;
}
div.tooltip {
	font-weight: bold;
	background: none !important;
	padding:0px !important;
}

/* ----- Start backup of original code
.tool-tip{
z-index:9999;
width: 280px;
background-color:#f6f6f6;
border:8px solid #eeeeee;
padding:8px !important;
text-shadow:0 1px 0 #fff;
display:none;
}
.tool-tip .tool-title{
	font-weight: bold;
	background: none !important;
	padding:0px !important;
}
------------ End backup of original code */

Finally... one little question out of curiosity.
Is the exclusion of an icon image for the tool tip in chronoforms v4 intentional?
Or is it a coding error? I rather liked the fact that there was a standard icon present
in version 3. then i could just replace that one with a custom made icon image.
Now i need to figure out a path / place to put the icon image myself and also modify
the HTML-code generated by the forms wizard.

Thanks in advance for your replies.

Orlando.

Hi obrowne,

I've just posted some CSS to add a tooltip image here

I've also modified your CSS a little to add the div.tip and some more !important

div.tooltipbox {
   z-index: 9999;
   width: 150px;
   display: none;
   font-family: Arial, Helvetica, sans-serif;
   font-size: .8em;
}
div.tip {
   background-color: #f6f6f6 !important;
   border: 8px solid #eeeeee !important;
   padding: 8px !important;
   text-shadow: 0 1px 0 #fff !important;
}
div.tooltip {
   font-weight: bold;
   background: none !important;
   padding:0px !important;
}

The end result is below

Bob

Hi Bob,

The modigfied CSS worked out nicely! Many thanks for that (A beer is comming your way 😀 )

Question though how is it that the original code is so different from what it should be?
I mean the id/class names need to be changed to correspond to the items in the frm etc.
Is this a bug that will be fixed in the future versions?

Als for th code to place an image tooltip, i solved that differently by replacing all the ?
with an image url. not to elegant, but it works for now. And as it is working i don't dare
go changing stuff again. But will use your code in future project and see how that works out.

Thanks again Bob for your assistance.
Orlando

Hi Orlando,

I'm not sure what you mean by "the original code is so different from what it should be" I think Max has just used the standard Joomla! tooltip code with his own CSS but I haven't checked.

Bob

Hi Bob,

Maybe I'm not to familiar with the code.
As i just started using Chronoforms 4 really.
In version 3 I could just easily look to the tooltip css and modify it to change the appearance of the tooltip.

this time i ran into some (minor) problems. for example the one stated here:viewtopic.php?f=26&t=71589

Anyway i'm real happy this forum exists! Keep up th good work..

bought you a little beer..
Cheers.
Orlando

Hi Orlando,

Many thanks for the beer.

Bob