[SOLVED] FormItBuilder tooltips

165 Posts

sketchi Reply #1, 13 years, 4 months ago

Hi, I'm using the awesome FormItBuilder to create a form. Now I want to add a question mark right after some of the labels, which displays a tooltip when hovred over.

I've got it working pretty well so far by just adding some JavaScript to the page and some html code right after the label name, like this:

$o_fe_websiteName	= new FormItBuilder_elementText('websiteName','Website name<a class=tooltip title=\'The title for the website.\'>?</a>');

It looks fine in the form and all, however, I'm running in to a couple of issues with the form validation and the email report. Since the label is used in these, my html code with the tooltip gets included in the email and in the validation error messages.

Is there a better way to add tooltips to avoid this? I'd rather not add each tooltip as an htmlBlock as it's a pretty long form with lots of tooltips.

Would appreciate any advice on this! Many thanks! [ed. note: sketchi last edited this post 13 years, 4 months ago.]

165 Posts

sketchi Reply #2, 13 years, 4 months ago

By the way, is there a simple way to export the finished form into a FormIt format, if you know what I mean, and continue editing the source code that way?

165 Posts

sketchi Reply #3, 13 years, 4 months ago

If anyone else wants to use tooltips in their FormItBuilder form, this is how kallteknik.se solved it for me.

After this line in core/components/formitbuilder/model/formitbuilder/FormItBuilder.class:

class FormItBuilder extends FormItBuilderCore{

Add these 2 lines:

private $_infos;
public function setInfos($value){$this->_infos = $value;}

Then, replace this line:

$s_labelHTML='<label class="mainElLabel"'.$s_forStr.'><span class="before"></span><span class="mainLabel">'.$o_el->getLabel().'</span>'.$s_desc.'<span class="after"></span></label>';

...with this:

$infoname = substr($s_forStr,6,$s_forStr.length-1);
$infotext = $this->_infos[$infoname];
if($infotext){$info  = "<a class=tooltip title='" . $infotext . "'>Help</a>";}else{$info="";}
$s_labelHTML='<label class="mainElLabel"'.$s_forStr.'><span class="before"></span><span clasmains="mainLabel">'.$o_el->getLabel().'</span>'.$s_desc.'<span class="after"></span></label>'.$info;

Then add the tooltip texts into your snippet (e.g. FormItBuilder_MyContactForm) like this:

$a_infos=array(
    'websiteName'=>'This is the name of your website',
    'domain'=>'Enter your domain name',
);

Et voilà! All you need after that is a JavaScript and some CSS styling according to your preferences. I used the script from http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery