Eric Hynds Multiselect Widget Conflicts With Jquery Ui Tooltip Widget

Here is a js fiddle JS $(function(){ $('select').multiselect(); $( document ).tooltip(); $( document ).tooltip( 'option', 'position', { my: 'left+20 center', at: 'right

Solution 1:

WORKING JS FIDDLE

So basically, whats happening is the multiselect plugin is adding and extra title property to all the inputs is creates so the jquery ui just automatically does its magic on that ones tooltips as well.

A simple workaround for this, is to just remove the title attributes that the multiselect adds before the jquery ui fires up.

Note: in my example I''m removing all input title props. In your production enviroment, you might not want to do that, so you can be more efficient and use something like this if you want:

$('_multiselect_widget_id').find('input').prop('title', '');

Heres my working code:

$(function(){
    $("select").multiselect();
    $('input').prop('title', '');


    $( document ).tooltip();
    $( document ).tooltip( "option", "position", { my: "left+20 center", at: "right center" } );
});