[Resolved] Show only available options for each input on custon checkboxes

[Author]

Posts

[umbertoZ]

Hi, I had to add tooltips to each item of a checkboxes filter on a Custom search. I used Bootsrap toolset and I dah to build the filter code by a taxonomy view with this code:

<wpv-loop>    
  <div class="checkbox">
    <label for="[wpv-attribute name='tax']-[wpv-taxonomy-slug]" title="[wpv-taxonomy-description]" data-toggle="tooltip" data-placement="right">
      <input type="checkbox" id="[wpv-attribute name='tax']-[wpv-taxonomy-slug]" class="js-wpv-filter-trigger" name="wpv-[wpv-attribute name='tax'][]" value="[wpv-taxonomy-slug]">
      [wpv-taxonomy-title]
    </label>
  </div>
</wpv-loop>

The output is exactly the same of a normal Toolset filter. I've 2 taxonomies, so I created 2 different views to display the two filters.

I also added the toolset filter shortcode inside a hidden DIV in the Search and Pagination editor of my Custom search View (I found it works also without the hidden filters):

<div class="hidden">
  [wpv-control-post-taxonomy taxonomy="my-taxonomy1" type="checkboxes" orderby="id" url_param="wpv-my-taxonomy1"]  
  [wpv-control-post-taxonomy taxonomy="my-taxonomy2" type="checkboxes" orderby="id" url_param="wpv-my-taxonomy2"]  
</div>

[wpv-view name="custom-search-taxonomy-my-taxonomy1" tax="my-taxonomy1"]
[wpv-view name="custom-search-taxonomy-my-taxonomy2" tax="my-taxonomy2"]

It works well with this settings:

Update the View results only when clicking on the search button
Update the Views results without reloading the page

Always show all values for inputs

But it doesn't work fine if I set:

Update the View results every time an input changes

Show only available options for each input

In this case it filters correctly and it shows only available options for each input on "hidden" filters, but it doesn't affect my custom filters. It doesn't checks the checkboxes, it doesn't hide empty options and it also doesn't update the URL of the browser.

Is there a way to fix it? Is there a different way to add tooltips to filters options?

thanks

[Christian Cox]

Hi, unfortunately our support policy says we do not offer support for custom-made filter input fields, because there is no JavaScript API available for triggering filter events and updating custom filter inputs with the selected options. I can give you some guidance for manipulating the standard, existing filter label attributes using JavaScript, but there isn't a good way to access a term's description and use it to define a tooltip "title". That would require significant custom code, and falls outside the scope of support we provide here.

You can use jQuery.each to loop over the checkbox containers and manipulate the title attribute of each label. Here's an example that loops over each checkbox and adds some arbitrary text in the label's title attribute:

// this function will be called to add the proper title and 
// data attributes to each checkbox label
var setupTooltips = function(){
  // loop over each filter form checkbox
  jQuery('.js-wpv-filter-form div.checkbox').each(function(index,item){
    
    // the text you want to show in the tooltip - you should edit this line
   var txt = 'This is some title text for the tooltip.';

    // set the label attributes
    jQuery(item).children('label').first().attr({
      'title': txt,
      'data-toggle': 'tooltip',
      'data-placement': 'right',
    });
  });
};

// this will call the setup function when the page first loads
jQuery(document).ready(function(){
  setupTooltips();
});

// this will call the setup function again after the filters have been updated by a search
jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
  setupTooltips();
});

[umbertoZ]

Thank you very much, i will test your solution.

[Christian Cox]

Thanks, I will stand by for your update.