jQuery Tooltip на Selectize

Question

Я пытаюсь добавить всплывающую подсказку jQuery в поле выбора Selectize ( http://brianreavis.github.io/selectize.js/), однако по некоторым причинам у меня возникают некоторые проблемы.

Вот фрагмент моего кода:

$(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>

По какой-то причине я не получаю подсказку jQuery, а подсказку собственного браузера. Когда я пытаюсь прикрепить всплывающую подсказку в консоли, она работает нормально..

Кто-нибудь когда-нибудь сталкивался с этой проблемой?

РЕДАКТИРОВАТЬ: класс ddOption добавляется к элементам выбора в шаблоне руля.

Answer 1

Я не знаю о Selectize, но могу понять, что он основан на selectmenu jQuery-ui, с которым я столкнулся с той же проблемой.

Основная причина заключается в том, что jquery-UI скрывает фактический элемент select и создает совершенно новый элемент с другим html, который имитирует его и синхронизирует его значение с оригинальным тегом select.

Итак, если вы захватываете его, например, по его идентификатору или классу, чтобы что-то сделать, вы в конечном итоге модифицируете скрытый элемент.

Вместо этого вы должны искать диапазон брата с помощью класса ui-selectmenu-button. Но лучше воспользуйтесь предпочитаемым инспектором браузера, чтобы увидеть его фактические атрибуты, используя плагин selectize.

Answer 2

ddOptions - это тип массива JS... вам нужен элемент html, чтобы получить подсказку... так что попробуйте следующий код... это может помочь вам...

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

});

Answer 3

Я нашел частичное решение:

Применяется только в том случае, если сообщение всплывающей подсказки является общим или равно всем элементам, которые принимают плагин Selectize в представлении.

Используйте jQuery для ручной настройки параметров всплывающей подсказки:

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

Answer 4

Я создал этот код. Надеюсь, это вам поможет.

Так я инициализировал свои данные для Selectize

$.ajax({
    type: 'GET',
    url : 'tableConfig',
    success : function(data) {
        $('#idTrans').each(function() {
            if (this.selectize) {
                let list = data.filter(x => x.codigo === "TRANS");
                for(let i = 0; i < list.length; i++){
                    this.selectize.addOption({value:list[i].idConfiguracion, text: list[i].valor, title: list[i].descripcion});
                }
            }
        });
    },
    error: function (request, status, error) {
        //alert("No se pudo realizar la operación por un error interno, contactese con el Administrador.");
    }
});

А затем я могу настроить всплывающую подсказку.

$('#idTrans').selectize({
    render: {
        option: function(data, escape) {
            let txtTitle = data.title;
            if(txtTitle === undefined || txtTitle === 'Ingrese Detalle:') txtTitle = '';

            return '<div class="option">' +
                '<div title="' + txtTitle + '">' + escape(data.text) + '</div>' +
                '</div>';
        },
        item: function(data, escape) {
            return '<div>'+ escape(data.text) + '</div>';
        }
    },
    onChange: function (value) {
        let tableConfig = $('#tableConfig').bootstrapTable('getData');
        let list = tableConfig.filter(x => x.idConfiguracion === parseInt(value));

        if (list.length > 0) {
            let idProTrans = list[0].nivel_padre;
            if (idProTrans !== null) {
                $("#idProceso_Trans").val(idProTrans);
            }
        }

    }
});

Свойство onChange. Возможно, вам это и не нужно и вы можете удалить эту часть, как видите, внутри свойства render. Я поставил "заголовок" для всплывающей подсказки

Наконец, выглядит вот так.