Question

我正在尝试在Selectize（http://brianreavis.github.io/selectize.js/）选择框中添加jQuery工具提示，但由于某种原因我遇到了一些问题。

以下是我的代码片段：

$(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，但我可以发现它是基于jQuery-ui的selectmenu，我遇到了同样的问题。

根本原因是jquery-UI隐藏了实际的select元素，并使用其他html构建一个全新的元素，模拟它并将其值与原始select标签同步。

所以，如果你捕获它，例如，通过它的id或类来做任何事情，你最终会修改一个隐藏的元素。

您应该使用ui-selectmenu-button类搜索兄弟跨度。但最好使用您首选的浏览器检查器，看看它的实际属性是否使用了选择插件。

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属性中。我把“标题”作为工具提示

最后，看起来像这样。

关于Selectize的jQuery工具提示

4 个答案: