-1

I have 2 search fields, ( choose a place ) ( number of people) and a button Search, if the choose a place is not choosen and the search is clicked the bootstrap tooltip should say Please choose a place, But I cannot for some reason accomplish this task and need help . This is my code for the search field and button .

<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>

And this is my script 

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

Of course the tooltip is not showing on the choose a place when the Search button is clicked, and the script is also not working.

4

2 回答 2

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>，因此当您将鼠标悬停在按钮上时，会出现顶部提示。接下来，我将 id 添加placeSelect到您的<select>标签中，因此我可以对其应用一些 Javascript：

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

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

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

这是一个活生生的例子：

引导层

编辑

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

于 2015-03-31T18:31:40.700 回答
0

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

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

更新：

要禁用工具提示检查Jasny - Arnold Daniels在这里回答

$('#myTooltip').tooltip()          // Init tooltips
$('#myTooltip').tooltip('disable') // Disable tooltips
$('#myTooltip').tooltip('enable')  // (Re-)enable tooltips
$('#myTooltip').tooltip('destroy') // Hide and destroy tooltips
于 2015-03-31T17:48:20.793 回答