javascript - bootstrap tooltip usage, in search field -
i have 2 search fields, ( choose place ) ( number of people) , button search, if choose place not choosen , search clicked bootstrap tooltip should please choose place, cannot reason accomplish task , need . code search field , 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 place"> <option>choose 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 script
<script type="text/javascript"> $('document').ready(function(){ $('mytooltip').tooltip(); }); </script> of course tooltip not showing on choose place when search button clicked, , script not working.
here's 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 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 place" class="btn button-bookndo form-control" value="search" type="submit"> </div> </form> </div> </div> first, applied tooltip <input> tag, when hover on button, tooptip appear. next, added , id placeselect <select> tag, apply javascript it:
$(document).ready(function(){ $("#tooltip").tooltip(); $("#placeselect").on("change", function(e){ if($(this).val() == ""){ $('#tooltip').tooltip('enable') } else { $('#tooltip').tooltip('disable') } }); }); what does, when change place select, depending on change to, enable or disable tooltip (which see if hover on <input>).
here's live example:
edit
keep in mind tooltip element in bootstrap doesn't appear when click something, rather when hover on it. if want appear when click, using popover: http://getbootstrap.com/javascript/#popovers
Comments
Post a Comment