Manage simple_form tooltips

Question

I want to show a hint in the input field of simple_form. While the choice of the unit "area_unit" changes, the prompts also change, area_unit can choose square meter and square feet. For example: When area_unit selects sq.m, surface_area displays the current area_unit as sq.m, while the tooltip displays area_unit as sq.feet. vice versa.

thin code:

.col-md-3.col-xs-6 = f.input :surface_area, label: "Surface Area" ,hint:"" .col-md-3.col-xs-6 = f.input :area_unit, collection: Property::AREA_UNIT_NAMES.map(&:reverse), include_blank: false / (in \u33A1) 

Changing the area_unit area also changes the value of surface_area.

  switchUnit: -> $(document).on 'change', '#property_area_unit', -> areaInput = $('#property_surface_area') if $(this).val() == 'sq_m' area = Math.round(parseFloat(areaInput.val())*0.0929*100)/100 else area = Math.round(parseFloat(areaInput.val())*10.7639*100)/100 areaInput.val(area) 

But how to customize the content of the tips?

Answer 1

You will need to do this using Javascript. Basically, you can just add it to the change event. If you use the default Simple_form form builder, then the help field should appear as a <span> next to the input field itself , that is, you should see something like the following when you open the page source

 <div class="input string optional property_surface_area field_with_hint"> <label class="string optional" for="property_surface_area">Surface Area</label> <input class="string optional" type="text" value="" name="property[surface_area]" id="property_surface_area" /> <span class="hint"></span> </div> 

So, the task is to update the span hint value in the change event to select units. The following code does this:

 switchUnit: -> $(document).on 'change', '#property_area_unit', -> areaInput = $('#property_surface_area') areaHint = $('.property_area_unit span.hint') if $(this).val() == 'sq_m' area = Math.round(parseFloat(areaInput.val()) * 0.0929 * 100) / 100 areaInOtherUnits = Math.round(area * 10.7639 * 100) / 100 else area = Math.round(parseFloat(areaInput.val()) * 10.7639 * 100) / 100 areaInOtherUnits = Math.round(area * 0.0929 * 100) / 100 areaInput.val(area) areaHint.html('= ' + areaInOtherUnits + ($(this).val() == 'sq_m' ? ' sq feet' : ' sq m')) 

The code above recalculates the area back to other units (you could probably just use the original value from the input property_surface_area , but recounting also rounds it) and sets the contents of the tooltip for that value, including other units. Selector for tooltip: "wrapper div for the entire form line → span with class" tooltip ".