I am customizing my selectbox with the select2 plugin. I now want to display a tooltip above the selectbox.
Here is the HTML code:
<select class="selectD input-sm" name="newsoptions_amount" data-toggle="tooltip" data-placement="bottom" title="Gallery Cover">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br><br><br>
<a class="width24 thumbcheck" data-toggle="tooltip" data-placement="bottom" title="Gallery Cover" data-id="">test tooltip</a>
And here is the JS code:
$(document).ready(function () {
$(".selectD").select2({
allowClear: true
});
});
$("[data-toggle='tooltip']").tooltip();
/*
* Add collapse and remove events to boxes
*/
$("[data-widget='collapse']").click(function () {
//Find the box parent
var box = $(this).parents(".box").first();
//Find the body and the footer
var bf = box.find(".box-body, .box-footer");
if (!box.hasClass("collapsed-box")) {
box.addClass("collapsed-box");
bf.slideUp();
} else {
box.removeClass("collapsed-box");
bf.slideDown();
}
});
I have added
data-toggle="tooltip" data-placement="bottom" title="Gallery Cover"How can I display the tooltip above the select box?
Check out the DEMO here