Bootstrap-select. Как правильно реализовать подсказку для опции?
Всем привет! Народ есть такой вопрос, мне нужно в Bootstrap-select к опции прикрепить поддсказку, причем сделать эту подсказку доступной и на десктопе и на мобильной версии. Как это правильно сделать?
<select id="" mobile="true" data-style="outline-none" class="selectpicker show-tick " data-width="100%">
<option value="1" data-content="<div>
<span>Title</span>
<span class='fa fa-question-circle-o' data-toggle='tooltip' title='другой текст подсказки'>некоторый текст</span>
</div>">
</option>
<option value="2" data-content="<div>
<span>Title2</span>
<span class='fa fa-question-circle-o' data-toggle='tooltip' title='текст подсказки'>текст</span>
</div>">
</option>
</select>
После некоторых попыток мне удалось получить такой результат:
<select id="" mobile="true" data-style="outline-none " class="selectpicker" data-width="100%" data-container="body" title="Choose one" required>
@foreach (var item in Model)
{
<option value="@item.Id" data-content="<span>@item.Title</span><input class='btn' value='?' type='button' role='button' data-toggle='tooltip' data-placement='right' title='@item.Description'/>"></option>
}
</select>
В скрипте сделал следующее:
var myDefaultWhiteList = $.fn.selectpicker.Constructor.DEFAULTS.whiteList;
myDefaultWhiteList.input = [];
// To allow input elements and data-option attributes on elements
myDefaultWhiteList.input = ['data-toggle', 'data-placement', 'title', 'role', 'value', 'type'];
$(function() {
$('.selectpicker').on('show.bs.select', function(){
console.warn('helo');
$('[data-toggle="tooltip"]').tooltip()
});
$('.selectpicker').selectpicker();
});
Осталось немного доделать