Styling of form tooltip


Author Message
Björn Isebaert

Posted: 7/28/2013
Quote message 

I'm trying to find out how I can style the tooltips that are shown when one hovers over the fiels in my contact form:


I've used Firebug, and found this:
<label id="jform_contact_name-lbl" class="hasTooltip required" title="" for="jform_contact_name" data-original-title="<strong>Name</strong><br />Your name">


I've been trying to add a class "hasTooltip" to template.css, but my knowledge of css is probably too basic as this didn't do anything.
I have absolutely no idea where that light yellow background and grey font color in the tooltip are coming from ...

Any help would be greatly appreciated - many thanks in advance!
 
Björn Isebaert

Posted: 7/28/2013
Quote message 

Oops, forgot to add the URL:
http://www.hooghuys.com/site/index.php/en/component/contact/contact/21-uncategorized/1-bjoern-isebaert-en
 
jkwebdesign

Posted: 7/28/2013
Quote message 

just add a new rule to your css file like example:

div.tooltip{
background-color:#000;
}

But i succest you to change your contactform extension.. There are plenty on good ones in JED. That field jumping could be difficult to fix..
 
Björn Isebaert

Posted: 7/29/2013
Quote message 

Thanks for your quick reply - I've tested it and it works. The field jumping is annoying, indeed, and I have no idea how to solve it.
I'll eventually look into an extension for the form, as it's too basic anyway, but I'm first going to the rest of my site now.

Thanks!!!
 
Janne

Posted: 8/1/2013
Quote message 

Does anyone know how to fix the field jumping problem?
 
FoTo50

Posted: 8/5/2013
Quote message 

Quote jkwebdesign:

But i succest you to change your contactform extension.. There are plenty on good ones in JED. That field jumping could be difficult to fix..


This has got nothing to do with a specific extension since the same behaviour turns up with the core forms of Joomla (e.g. registration form).
 
FoTo50

Posted: 8/5/2013
Quote message 

Additional info: this behaviour is reproducable only with the core Joomla forms of version 3.x, in 2.5.x all seems to be fine
 
FoTo50

Posted: 8/5/2013
Quote message 

After investigating this problem a little closer with Firebug and compare it with a functioning template (e.g. the simple "protostar" coming with Joomla 3.x) I found, that there is inserted dynamicaly a <div class="tooltip fade top in" style="..."> onMouseOver.

Protostar template inserts it with e.g.
style="top:255px;left:219px;display:block"


But Artisteer templates insert it with e.g.
style='top:-80px;left:184px;display:block;position:relative"


I have no clue where this code actually is coming from to correct it "the clean way", but when I added a definition in template.css:
div.tooltip { position:absolute !important; }
it solved my field jumping issue.

Maybe this helps :-)
 
Björn Isebaert

Posted: 8/5/2013
Quote message 

Wow, I would never have found that - thanks, FoTo50! :-)
 
janne

Posted: 8/6/2013
Quote message 

Quote FoTo50:

After investigating this problem a little closer with Firebug and compare it with a functioning template (e.g. the simple "protostar" coming with Joomla 3.x) I found, that there is inserted dynamicaly a <div class="tooltip fade top in" style="..."> onMouseOver.

Protostar template inserts it with e.g.
style="top:255px;left:219px;display:block"


But Artisteer templates insert it with e.g.
style='top:-80px;left:184px;display:block;position:relative"


I have no clue where this code actually is coming from to correct it "the clean way", but when I added a definition in template.css:
div.tooltip { position:absolute !important; }
it solved my field jumping issue.

Maybe this helps :-)



That solved my problem. Thanks alot!

 
Sana

Posted: 8/17/2013
Quote message 

Bless you mate, you've made my day!
:-)
 
Eric

Posted: 9/23/2013
Quote message 

Adding the above:

div.tooltip { position:absolute !important; }

in the CSS options box when exporting the template makes sure that you do not have to edit template.css manually after each edit in Artisteer.

But this is a bug that should be fixed, moreover as in my case the button text is invisible!
 
Bugs

Posted: 10/25/2013
Quote message 

Quote Eric:

Adding the above:

But this is a bug that should be fixed, moreover as in my case the button text is invisible!


Did you end up finding a work around for the invisible search button text? I have the same problem and can't work out why.

 
ventsislav

Posted: 10/26/2013
Quote message 

Hi,
I'm not a specialist, but through trial and error I found the following:
This is only for Artisteer 4.2.0.60609
Step 1
Edit file Page.php in folder mytemplate/library/Artx
change line ~ 143
from
$content = str_replace('class="hasTooltip', 'class="hasTip', $content);

to
$content = str_replace('class="hasTooltip', 'class="hasTooltip', $content);

Step 2
Edit file template.css in folder mytemplate/css
Search for and delete this code around line 2056
.art-pager>*:last-child {   margin-right: 0 !important; } 

Step 3
In the file template.css add:
div.tooltip { position:absolute !important; max-width: 600px !important; }  div.tip-wrap div.tip { max-width: 600px !important; }

This is working on my Joomla 2.5.14, Joomla 3.1.1, Joomla 3.1.5
Please, if anyone has found a better solution to share it
 
Fion

Posted: 6/21/2016
Quote message 

jQuery(document).ready(function()
{
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});


the above script appear in my page using artisteer template where under a modules page: default.php at joomla 3.5.1
which should be generated at line 1520 from mytemplate/script.js

error message : Uncaught TypeError: jQuery(...).tooltip is not a function

please help