jQuery Tooltip on Selectize

selectize bootstrap 4
selectize.js tutorial
selectize events
selectize onchange
selectize ajax
selectize codepen
selectize destroy
selectize placeholder

I am trying to add a jQuery tooltip on a Selectize (http://brianreavis.github.io/selectize.js/) select box, however for some reason I'm having some problems.

Here's a snippet of my code:

$(function() {

  $("#myDropdown").selectize({
    onChange: function(value) {
      var ddOptions = {
        1: triggerOpt1,
        2: triggerOpt2,
        3: triggerOpt3,
        4: triggerOpt4
      };

      ddOptions[value]();
    },
    render: {
      option: showItem,
      item: showItem
    }
  });

  $("#myDropdown .ddOption").tooltip({
    position: "bottom left",
    offset: [-2, 10],
    opacity: 0.9
  });

});

function showItem(data) {
  return Handlebars.templates["dropdown"]({
    itemClass: data.value,
    label: data.text,
    title: I18n["ddOption_" + data.value]
  });
}
<select id="myDropdown">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

I don't know about Selectize but I can figure out it is based on jQuery-ui's selectmenu with which I experienced same problem.

The underlying cause is that jquery-UI hides actual select element and build an entirely new one with other html which simulates it and synchronize its value to original select tag.

So, if you capture it, for example, by it's id or class to do anything, you end up modifying a hidden element.

You should search for a sibling span with the ui-selectmenu-button class instead. But better use your preferred browser inspector to see it's actual attributes uses selectize plugin.

javascript - jQuery Tooltip on Selectize, $(function() { $("#myDropdown").selectize({ onChange: function(value) { var ddOptions = { 1: triggerOpt1, 2: triggerOpt2, 3: triggerOpt3,  Selectize is a jQuery-based custom <select> UI control. Useful for tagging, contact lists, country selectors, etc.

ddOptions is JS array type.. you need html element to get hover intent.. so try below code .. it might help you out...

$("#myDropdown option").tooltip({
    position: "bottom left",
    offset: [-2, 10],
    opacity: 0.9
  });

});

Selectize.js, Selectize is a jQuery-based custom UI control. It's useful for tagging, contact lists, country selectors, and so on. Selectize is a jQuery-based custom <select> UI control. It's useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (gzipped). The goal is to provide a solid & usable user-experience with a clean and powerful API.

I found a partial solution:

Only apply if you tooltip message is generic or equals, to each elements that take Selectize plugin in the View.

Use jQuery to set manually ToolTip options:

$(".selectize-control").tooltip({
    placement: "top", // position
    title: "Your Message"
});

Selectize.js / Aaron Kyle Dennis / Observable, Selectize.js Selectize.js is a jQuery-based input interface. It's useful for tagging, contact lists, country selectors, and so on. This notebook ports  jQueryUI provides tooltip() method to add tooltip to any element on which you want to display tooltip. This gives a fade animation by default to show and hide the tooltip, compared to just toggling the visibility.

selectize/selectize.js: Selectize is the hybrid of a textbox , Selectize is an extensible jQuery-based custom <select> UI control. It's useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (  Selectize.js. Selectize is the hybrid of a textbox and <select> box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on.

Data Attributes in Selectize Options · Issue #353 · selectize/selectize , I am using Selectize following the State City example. Is it possible to store some additional data from the Ajax request along with every option in City select? jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Selectize.js, Selectize is a jQuery-based custom <select> UI control. Useful for tagging, contact lists, country selectors, etc. Tags. autocomplete · control · form · input · select  jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Comments
  • Yes, but I think with cunning css it's possible to select the sibling element