Twitter Bootstrap popovers

[Paul Tomblin]

I use Twitter Bootstrap and on my select options, I have popovers to provide some extra information in a box that floats next to the select. Each option will have something like 

<option value="123" rel="popover" data-content="Extra information about this option">This option</option>

I was using selectBoxIt to improve the look and feel of my selects, but I'm looking to switching to select2 in order to get searching. But unlike selectBoxIt, select2 doesn't seem to copy the data and attributes from the <option> to its own <li>. Is there any way to turn that on? Or perhaps a snippet of code that would do it?

[Kevin Brown]

Select2 doesn’t copy the data attributes automatically, instead it holds a reference to the original `<option>` tag as `data.element` (where `data` is passed into `templateResult`). You can pull any data attributes off of there if you need to.

 

Kevin Brown

--
You received this message because you are subscribed to the Google Groups "select2" group.
To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
To post to this group, send email to sel...@googlegroups.com.
Visit this group at https://groups.google.com/group/select2.
For more options, visit https://groups.google.com/d/optout.

 

[Paul Tomblin]

I'm getting close, but not quite there:

(forgive any typos, but I can't cut and paste from my vmWare Horizons session)

$('select:visible').select2((

  templateResult: function(data) {

    var $elem = $(data.element);

    if ($elem.attr('rel') === 'popover') {

      ret = $("<span rel=\"popover\">" + data.text + "</span>");

      ret.popover({

        trigger: 'hover',

        placement: $elem.data('placement'),

        content: $elem.data('content')

      });

      return ret;

    } else {

      return data.text;

    }

  }

});

This gives me popovers that are empty, although sometimes just as I mouse from one option to the next, the popover briefly shows the text from the one I'm leaving. I feel like I'm either nearly there or a million miles away.

[Paul Tomblin]

Got it!

$('select:visible').select2((

  templateResult: function(data) {

    var $elem = $(data.element);

    if ($elem.attr('rel') === 'popover' && $elem.data('content')) {

      ret = $("<span rel=\"popover\">" + data.text + "</span>");

      ret.popover({

        trigger: 'hover',

        container: $('.select2-dropdown:visible'),

        html: true,

        placement: $elem.data('placement') || 'right',

        content: $elem.data('content'),

        title: $elem.data('title') || ''

      });

    } else {

      ret = $("<span>" + data.text + "</span>");

    }

    return ret

  }

});