jquery - 如何向选择框显示顶部提示

Question

我在表单中有一个选择框。

<div class="control-group">
    <label>![enter image description here][1] :
    </label>
    <div class="controls">
        <select required name="gender" id="gender" class="span12">
            <option value=""></option>
            <option value="M">Male</option>
            <option value="F">Female</option>
            <option value="U">Unknown</option>
        </select>
    </div>
</div>

我希望当用户单击表单提交按钮时，如果没有选择选项，而不是显示在选择框左侧的工具提示。我希望工具提示指针应该指向选择框的中间。

我怎样才能做到这一点？

Answer 1

由于您标记了 Bootstrap，因此您可以tooltip使用Bootstrap's JS Components.

我试过一个简单的，

$(document).ready(function () {
    $("select").tooltip({
        placement: 'right'
    });
});

示例JSFiddle。

希望你有一些想法。