bootstrap tooltip usage, in search field

Question

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.

score 1 · Answer 1 · answered Mar 31 '15 at 18:31

Here's my solution:

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

First, I applied your toolTip to the <input> tag, so when you hover over the button, the tooptip will appear. Next, I added and id placeSelect to your <select> tag, so I could apply some Javascript to it:

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

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

What this does, is when you change the place select, depending on what you change it to, it will enable or disable the tooltip (which you will see if you hover over your <input>).

Here's a live example:

Bootply

Edit

Keep in mind that a tooltip element in Bootstrap doesn't appear when you click something, but rather when you hover over it. If you want it to appear when you click, look into using popover: http://getbootstrap.com/javascript/#popovers

No problem :) Glad I could help. Make sure to upvote and/or accept this answer so others can benefit from them should they encounter a similar issue. Cheers! — Tim Lewis, Mar 31 '15 at 18:50

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

The script is not working because you are not using the selector properly

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

Updated:

To disable the tooltip check 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

edited May 23 '17 at 11:43

Community

1
1

answered Mar 31 '15 at 17:48

Matias Fernandez Martinez

1,877
13
15

Thanks for that, but how do I get the tool tip to work when the search button is clicked , and nothing is selected on CHOOSE A PLACE ? – Masnad Hossain Mar 31 '15 at 17:53
I just updated my answer, please let us know if it works fine – Matias Fernandez Martinez Mar 31 '15 at 18:03
Yea, but i need to make sure the tooltip appears on the choose a place when the search button is clicked and there is no selection done in choose a place... what do I write to fix that, i mean link the search to choose a place – Masnad Hossain Mar 31 '15 at 18:10
First, your HTML is not working, you cantt set
tag inside a
– Matias Fernandez Martinez Mar 31 '15 at 18:27

bootstrap tooltip usage, in search field

2 Answers2