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>标记，因此当您将鼠标悬停在按钮上时，将显示tooptip。接下来，我添加了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 answer here

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

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

2 个答案: