Question

帮助我，因为我不熟悉jQuery＆amp; Web开发。我的要求是在文本框中删除（...）长文本然后如果鼠标悬停在它们上面，则在工具提示中显示全文。

为此，我使用了Bootstrap的工具提示。我做的是以下内容：

下载了bootstrap js并包含在我的文件中，如下所示：

 <script type="text/javascript" src="scripts/bootstrap.min.js"></script>

改变了我的元素

<input type="text" name="tooltip" id="samplebox" data-toggle="tooltip" title="Ankit" >

为了动态更新标题，我使用了jQuery

<script>
    $(document).ready(function(){
        $(" #samplebox ").mouseenter(function(){
            var word = document.getElementById("samplebox").value;
            $(" #samplebox ").attr('title', word);
        });     
    });
</script>

这适用于那个元素。

现在我必须为更多的文本框做同样的事情，其数量可以继续增加。现在，我想创建一个通用函数，我可以传递id 该元素，并为鼠标悬停的任何文本框完成。

Answer 1

如果没有课程，您可以使用attribute-selector，因为我假设使用工具提示时始终存在属性data-toggle="tooltip"：

$(document).ready(function(){
    $("[data-toggle=tooltip]").mouseenter(function () {
        var $this = $(this);
        $this.attr('title', $this.val());
    });   
});

<强> Demo

注意：

要与bootstraps工具提示一起使用，您可能需要更改属性data-original-title，而不是title来更新工具提示的内容。看看这个question

Answer 2

您可以像这样使用类选择器

<input type="text" name="tooltip" class="samplebox" data-toggle="tooltip" title="Ankit" >

    <script>
    $(document).ready(function(){
        $(".samplebox").mouseenter(function(){
            var word = $(this).value();
            $(this).attr('title', word);
        });     
    });
</script>

这将在您创建任何通用函数所需的所有文本框上触发事件

Answer 3

=CDate(Fields!YourDateString.Value)

Answer 4

首先为每个文本框添加公共类。

<input type="text" name="tooltip" class="myclass" data-toggle="tooltip" title="Ankit" >

然后jQuery看起来像这样。

  <script>
    $(document).ready(function(){
        $(".myclass").mouseenter(function(){
            var word = document.getElementById("samplebox").value;
            $(this).attr('title', word);
        });     
    });
  </script>

使用jQuery更改工具提示标题

4 个答案: