Question

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

如果用户在文本框中输入了值，您如何动态更改工具提示标题的值？

Answer 1

我认为更简单的解决方案是

＆＃13;

$(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'
    }
  })
});

＆＃13;

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

＆＃13;

Answer 2

假设您可能希望在用户在文本框中进行更改时更改标题

 $('#id_part_pay').bind('keydown',function(){
        $('#partpay_tooltip').attr('title',$(this).val());
    });

Answer 3

您可以尝试以下代码：

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>

如何在用户键入文本框时更改工具提示标题？

3 个答案: