jquery - display 3 different bootstrap info icon on change function menu -
i have odd bug trying display tooltip depending on selected in change function (also tooltip info different each). menu has 3 possible choices. seems show/hiding tooltip not work correctly resorted using css opacity property. works 1 , not other. 1 knows why complicated on on change function? , how make work correctly. trying show matching tooltip each option of menu.
$('#menu1').change(function() { if ($(this).val() == 'newhire') { // or this.value == '1' $("#iconnh").css({ opacity: 1.5 }); $("#iconup").css({ opacity: 0.0 }) $("#iconnh").show(); $("#iconup").hide(); } if ($(this).val() == 'upskill') { // or this.value == '2' $("#iconnh").show(); $("#iconup").css({ opacity: 1.5 }); $("#iconup").hide(); $("#iconnh").css({ opacity: 0.0 }); } if ($(this).val() == 'both') { // or this.value == '3' $("#box5").show(); $("#iconnh").hide(); } else if ($(this).val() == '') { $("#iconnh").hide(); $("#iconup").hide() } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="menu1"> <option id="option1" value=""></option> <option value="newhire">new hire</option> <option value="upskill">upskill</option> <option value="both">both</option> </select> <a id="iconnh" style="margin-right:200px;" data-toggle="tooltip" title="new hire audience availability"><span class="glyphicon glyphicon-info-sign"></span></a> <a id="iconup" style="margin-right:200px;" data-toggle="tooltip" title="new hire audience availability"><span class="glyphicon glyphicon-info-sign"></span></a>
Comments
Post a Comment