Popup Tooltip For A Profile Field?

Store Builder Questions
1

I was wondering if anyone have any experience with creating tooltip in cs-cart? I’m looking for a way to create a simple popup tooltip text to appear when the phone field is selected during registration at checkout. I’ve found a few codes using CSS / jquery, e.g. [url=“Using tooltips in form fields”]http://jquerytools.github.io/demos/tooltip/form.html[/url] but im not sure where to put the codes and how to get it to work for that particular field. Anyone able to help?



Thanks! :grin:

2

There is default cm-tooltip microformat in CS-Cart which can be used for profile fields. Please find more details here



http://docs.cs-cart.com/4.2.x/core/front-end/microformats.html?highlight=tooltip

3

[quote name=‘eComLabs’ timestamp=‘1420030653’ post=‘201383’]

There is default cm-tooltip microformat in CS-Cart which can be used for profile fields. Please find more details here



http://docs.cs-cart…ghlight=tooltip

[/quote]



Thanks ecom labs! However I dont understand from reading that how I can set the label value for that particular field nor add “cm-tooltip” to the class, other than that the function is supported. Do I need to create a .override hook or is it a clever and simple way to do it directly in Cs-cart backend? The manual does not state which file I need to adapt to implement.



Has anyone tried this before? :-)

4

For custom html blocks you can work with css class style.

Example CSS code:


a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span { z-index:10;display:none; padding:14px 20px; margin-top:-30px; margin-left:28px; width:300px; line-height:16px; }
a.tooltip:hover span{ display:inline; position:absolute; color:#111; border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
/*CSS3 extras*/
a.tooltip span { border-radius:4px; box-shadow: 5px 5px 8px #CCC; }




Html code

example:



code or text from phone

Warning!!!

These numbers not allowed.




Mousse over popup:

[attachment=8966:2015-01-08_020652.png]



For the php file, i think its not that easy. you could try asking some help,from designers and developers


design/themes/YOURTHEME/templates/views/profiles/components/profile_fields.tpl






Hope this help you further.



Regards

2015-01-08_020652.png

5

Thanks Anaconda!



That helped a good bit! I looked at the profile_fields.tpl file and changed the class to “input-text cm-tooltip” for the “simple input” fields at the bottom of the page.



for “title” I wrote the following:



title={__(“{$data_name}_{$data_id}”)}



so that I could make a language variable for that field based on the output in the title attribute.



So for my phone field I created a “user_data_b_phone” language variable in Cs-cart which returns its value as a tooltip.



The only obvious problem is that tooltip appears for the rest of the fields as well and shows the language variable I create in titles, such as user_data_email, user_data_b_address etc.



Is there any way I can prevent the tooltip from appearing unless there’s a assigned value to its language variable or or even better, only make the “cm-tooltip” apply for that particular field?



So close so close… I think… :grin:



Thanks!

6

[quote name='simenkl' timestamp='1420735483' post='201987']

Is there any way I can prevent the tooltip from appearing unless there's a assigned value to its language variable or or even better, only make the “cm-tooltip” apply for that particular field?

[/quote]



Sorry, I misunderstood the initial request. Unfortunately, cm-tooltip microformat does not support this behavior: