Questions › How to change the tooltip title when a user typed into a textbox?
<input type="text" id="id_part_pay"  value="<?php echo $listing['part_pay'];?>" class="textbox" name="part_pay" autocomplete="off" />
                        <a href="" id="partpay_tooltip" class="fa fa-question-circle" data-toggle="tooltip" data-placement="right" title="<?php echo $listing['part_pay']; ?> % of amount paid during booking online and remaining <?php echo $listing['partpay_tooltip'];?>% paid during check in " data-original-title=""></a></label>

If a user entered a value in a textbox, how do you dynamically change the value of a tooltip title?

Comments :

are you using bootstrap tooltips

Keale replied

Just to clarify, does your quesion go like this? How to change the tooltip title when a user typed into a textbox?

Keale replied

I assumed in your edit that my previous assumption is correct so I suggested to improve your question for clarity.


3 Answers :
Arun P Johny answered

I think an easier solution is

$(window).load(function() {
  $('#partpay_tooltip').tooltip({
    title: function() {
      var val = $('#id_part_pay').val();
      return val + '% of amount paid during booking online and remaining ' + (100 - val) + '% paid during check in'
    }
  })
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"/>

<input type="text" id="id_part_pay" value="2" class="textbox" name="part_pay" autocomplete="off" />
<a href="" id="partpay_tooltip" class="fa fa-question-circle" data-toggle="tooltip" data-placement="right" data-original-title=""></a>

Rohit Kumar answered

Assuming that you may want to change title when user do changes in textbox

 $('#id_part_pay').bind('keydown',function(){
        $('#partpay_tooltip').attr('title',$(this).val());
    });
Jai replied
$(this).val() or this.value either one of it will work but not yours.;
Rohit Kumar replied
thanks @Jai , corrected now;
guvenckardas answered

You can try the code below:

HTML:

<input type="text" id="id_part_pay" value="<?php echo $listing['part_pay'];?>" class="textbox" name="part_pay"
       autocomplete="off" onchange="myFunction()"/>
<a href="" id="partpay_tooltip" class="fa fa-question-circle" data-toggle="tooltip" data-placement="right"
   title="<?php echo $listing['part_pay']; ?> % of amount paid during booking online and remaining <?php echo $listing['partpay_tooltip'];?>% paid during check in "
   data-original-title=""></a>

JS

<script>
    function myFunction() {
        var _val = document.getElementById("id_part_pay").value;
        document.getElementById("partpay_tooltip").setAttribute("title", _val);
    }
</script>
Rohit Kumar replied
what are you doing while changing value of an anchor element??;
guvenckardas replied
It was just an example @RohitKumar;
guvenckardas replied
Could you please 'mark as answer' for any answer you used for. Thanks;