刷新 jquery ui 个工具提示的内容 select 个框

Question

我在 select 个框上应用了工具提示，我想知道当我制作 selection 时是否可以实时刷新工具提示内容。

我的代码看起来像这样：

$(document).tooltip({
        items: 'select',
        content: function() {
            var content = "";

            $(this).find(':selected').each(function() {
                content += $(this).text() + "<br/>";
            });

            return content;
        },
        position: {my: 'right top', at: 'left top'}
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css">
<select multiple>
  <option value="1" selected>opt1</option>
  <option value="2">opt2</option>
</select>

Answer 1

重绘工具提示的最简单方法是对其调用 close 和 open 方法，您可以在 change 事件处理程序中执行此操作。但是，as stated in the documentation，为了使 open 保持一致，您必须在 <select> 标记本身上创建小部件，而不是从 document:[=19= 委托它]

$('select').tooltip({
        items: 'select',
        content: function() {
            var content = "";

            $(this).find(':selected').each(function() {
                content += $(this).text() + "<br/>";
            });

            return content;
        },
        position: {my: 'right top', at: 'left top'}
    })
.change(function() {
    $(this).tooltip('close').tooltip('open');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css">
<select multiple>
  <option value="1" selected>opt1</option>
  <option value="2">opt2</option>
</select>

刷新 jquery ui 个工具提示的内容 select 个框

refresh content for jquery ui tooltips on select boxes

jquery

jquery-ui

tooltip