引导工具提示用法，在搜索字段中

Question

我有 2 个搜索字段，（选择一个地方）（人数）和一个按钮搜索，如果未选择选择一个地方并且单击了搜索，则引导工具提示应该说请选择一个地方，但我不能出于某种原因完成此任务并需要帮助。 这是我的搜索字段和按钮代码。

<div class="col-md-4 col-md-offset-4 hidden-xs hidden-sm " style="margin-top:50px;">
    <div class="row">
        <form action="/Places/view" id="PlaceDisplayForm" method="get" accept-charset="utf-8">          
        <!--<form method="get" action="Places/view">-->
        <div class="col-md-4" style="margin-bottom:15px; padding:0;">
            <select name="place" class="form-control" style = "padding: 5px 5px;">
                <div id="myToolTip" data-toggle="tooltip" title="Choose a Place">
                    <option>Choose a Place </option>
                </div>
                    <option>Helsinki</option>
                    <option>Lapland</option>
            </select>
        </div>
        <div class="col-md-5" style="margin-bottom:15px;">
            <select  name="people" class="form-control" style = "padding: 5px 5px;">
                <option>Number of People</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>10+</option>
            </select>
         </div>
         <div class = "col-md-3" >
            <input type="submit" class="btn button-bookndo form-control" value="Search" >
        </div>
        </form>               
    </div>
</div>

这是我的脚本

<script type="text/javascript">
$('document').ready(function(){
    $('myTooltip').tooltip();
});
</script>

当然tooltip 没有显示在单击搜索按钮时的选择位置上，并且脚本也不起作用。

Answer 1

这是我的解决方案：

<div class="col-md-4 col-md-offset-4 hidden-xs hidden-sm " style="margin-top:50px;">
  <div class="row">
    <form action="/Places/view" id="PlaceDisplayForm" method="get" accept-charset="utf-8">        
      <!--<form method="get" action="Places/view">-->
      <div class="col-md-4" style="margin-bottom:15px; padding:0;">
        <select id="placeSelect" name="place" class="form-control" style="padding: 5px 5px;">
          <option value="">Choose a Place </option>
          <option value="Helsinki">Helsinki</option>
          <option value="Lapland">Lapland</option>
        </select>
      </div>
      <div class="col-md-5" style="margin-bottom:15px;">
        <select name="people" class="form-control" style="padding: 5px 5px;">
          <option>Number of People</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>9</option>
          <option>10</option>
          <option>10+</option>
        </select>
      </div>
      <div class="col-md-3">
        <input id="toolTip" data-toggle="tooltip" title="Choose a Place" class="btn button-bookndo form-control" value="Search" type="submit">
      </div>
    </form>               
  </div>
</div>

首先，我将您的toolTip 应用到<input> 标记，因此当您将鼠标悬停在按钮上时，会出现顶部提示。接下来，我将placeSelect 添加到您的<select> 标签中，这样我就可以对其应用一些Javascript：

$(document).ready(function(){
    $("#toolTip").tooltip();

    $("#placeSelect").on("change", function(e){
      if($(this).val() == ""){
        $('#toolTip').tooltip('enable')
      } else {
        $('#toolTip').tooltip('disable')
      }
    });
});

它的作用是，当您更改地点选择时，根据您将其更改为的内容，它会启用或禁用工具提示（如果您将鼠标悬停在您的 <input> 上，您会看到）。

这是一个活生生的例子：

Bootply

编辑

请记住，Bootstrap 中的 tooltip 元素不会在您单击某个内容时出现，而是在您将鼠标悬停在它上面时出现。如果您希望它在单击时出现，请考虑使用 popover: http://getbootstrap.com/javascript/#popovers

Answer 2

脚本无法正常工作，因为您没有正确使用选择器

$('#myTooltip').tooltip();

更新：

要禁用工具提示检查Jasny - Arnold Daniels 回答here

$('#myTooltip').tooltip()          // Init tooltips
$('#myTooltip').tooltip('disable') // Disable tooltips
$('#myTooltip').tooltip('enable')  // (Re-)enable tooltips
$('#myTooltip').tooltip('destroy') // Hide and destroy tooltips