How to set tooltips position on a per form basis

Hello @diegocanal,

In reality the tooltips position is relative to the corresponding fields, the code that decides the toolips position is:

position: { my: "left top", at: "left bottom+5", collision: "none" }

Into the “/wp-content/plugins/calculated-fields-form/js/fbuilder-pro-public.jquery.js” file.

Could you indicate the URL to the webpage with the form inserted, and the tooltip that is not displaying in the correct position, please?

Best regards.

Hi,

Sorry I had not checked the “Notify me of follow-up replies via email” box so I did not notice you had replied to me.

Actually I have two forms on the same page. For usability reasons I would like to change the tooltips position differently for each form –the form on the left would ideally have the tooltips being positioned to the right hand side of the fields whereas the form on the right would preferably have them positioned to the left–.

Also I would like to have control over tooltip positioning on a per viewport basis, as the two forms go from standing side by side on wider viewports to standing one below the other on the narrower viewports…so in the last scenario I would rather have the tooltips the way they are now.

Here you have the URL you asked for: https://goo.gl/SRp7Sz

Thanks!

Best Regards.

Hello,

In this case you should call two codes:

The following one for the form at left:

jQuery( "#fbuilder_1" ).tooltip({show: false,hide:false,tooltipClass:"uh-tooltip",position: { my: "left top", at: "rigth top", collision: "none" },items: "[uh]",content: function (){return jQuery(this).attr("uh");}, open: function( evt, ui ){ try{ if(window.matchMedia("screen and (max-width: 640px)").matches) setTimeout( function(){ jQuery(ui.tooltip).hide('fade'); }, 3000); }catch( err ){}} });

and the following code for the form at right:

jQuery( "#fbuilder_2" ).tooltip({show: false,hide:false,tooltipClass:"uh-tooltip",position: { my: "right top", at: "left top", collision: "none" },items: "[uh]",content: function (){return jQuery(this).attr("uh");}, open: function( evt, ui ){ try{ if(window.matchMedia("screen and (max-width: 640px)").matches) setTimeout( function(){ jQuery(ui.tooltip).hide('fade'); }, 3000); }catch( err ){}} });

If you need additional help, I can offer you a custom coding service through my personal website:

https://cff.dwbooster.com/customization

Best regards.

Hello,

Thank you so much! The code you provided plus some minor touches –to change back the tooltips position for the narrower viewports (also on window resize)– has allowed me –given my poor programming skills– to achieve the desired result.

Your support rocks!..and this is not the first time it happens. I really appreciate it.

Just in case it is of any help to anyone, here is the code I ended up with (please forgive me if I committed any coding aberration):

$(window).on('resize', function(){var position;if (window.matchMedia("screen and (max-width: 767px)").matches){ position = {my: "left top", at: "left bottom+2", collision: "none"};} else {position = {my: "left top", at: "right+5 top", collision: "none" };}jQuery("#fbuilder_3").tooltip({show: false,hide: false,tooltipClass: "uh-tooltip dcr_tooltip_fbuilder_3",position: position,items: "[uh]",content: function() {return jQuery(this).attr("uh");},open: function(evt, ui) {try {if (window.matchMedia("screen and (max-width: 640px)").matches) setTimeout(function() { jQuery(ui.tooltip).hide('fade'); }, 3000);} catch (err) {}}});var position;if (window.matchMedia("screen and (max-width: 767px)").matches){ position = {my: "left top", at: "left bottom+2", collision: "none"};} else {position = {my: "right top", at: "left-5 top", collision: "none" };}jQuery("#fbuilder_4").tooltip({show: false,hide: false,tooltipClass: "uh-tooltip dcr_tooltip_fbuilder_4",position: position,items: "[uh]",content: function() {return jQuery(this).attr("uh");},open: function(evt, ui) {try {if (window.matchMedia("screen and (max-width: 640px)").matches) setTimeout(function() { jQuery(ui.tooltip).hide('fade'); }, 3000);} catch (err) {}}});}).trigger('resize');

Best regards,

• This reply was modified 8 years, 2 months ago by diegocanal.

Hello @diegocanal,

Thank you very much for sharing your solution.

Best regards.