refresh content for jquery ui tooltips on select boxes

Question

I have applied a tooltip on select boxes and I want to know if there is a possibility to refresh the tooltip content in real time, when I make a selection.

My code looks something like this:

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

The simplest way of redrawing the tooltip is to call close and open methods on it, and you can do this in a change event handler. However, as stated in the documentation, for open to be consistent, you'd have to create the widget on the <select> tag itself instead of delegating it from document:

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