Question

我有这个表格标记

<tr class="row0">
<td width="7%" class="center td-input_sistemazione">A4 + CAR</td>
<td width="7%" class="center td-input_destinazione">Ancona-Igoumenitsa</td>
<td width="7%" class="center td-input_datetime">2019-08-13</td>
<td width="7%" class="center td-input_time">13:30</td>
<td width="7%" class="center td-input_stagione">Bassa</td>
<td width="7%" class="center td-input_optiondate">2019-07-25</td>
<td width="7%" class="center td-input_issued">no</td>
<td width="7%" class="center td-input_appunti">TEST TEST TEST TEST TEST TEST TEST TEST VERY VER LOOOONG TEST</td>
<td width="7%" class="center td-name">wassy</td>
</tr>

我希望将很长的td-input_appunti字段文本截断并在悬停时显示在工具提示中。要截断，我使用了以下CSS

<style>
.td-input_appunti {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 90px;
}
</style>

为显示工具提示，我使用了以下jquery

<script>
jQuery(function($) {
$(document).on("mouseenter", ".td-input_appunti", function () {
     var $this = $(this);
     if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
         $this.tooltip({
             title: $this.text(),
         });
     $this.tooltip('show');
     }
 });
 });
</script>

问题是通过这种方式，工具提示会在类.td-input_appunti的td旁边显示为div，并且我希望它位于td标记内，因为如果在外部，则会提示下一个td位置。我无法更改td标记以在td内选择更具体的标签，因为该表是通过插件生成的，因此必须使用jquery来完成。

期望

<tr class="row0">
<td width="7%" class="center td-input_sistemazione">A4 + CAR</td>
<td width="7%" class="center td-input_destinazione">Ancona-Igoumenitsa</td>
<td width="7%" class="center td-input_datetime">2019-08-13</td>
<td width="7%" class="center td-input_time">13:30</td>
<td width="7%" class="center td-input_stagione">Bassa</td>
<td width="7%" class="center td-input_optiondate">2019-07-25</td>
<td width="7%" class="center td-input_issued">no</td>
<td width="7%" class="center td-input_appunti">TEST TEST TEST TEST TEST TEST TEST TEST VERY VER LOOOONG TEST
<div class="tooltip fade top in" style="top: 372px; left: 946.5px; display: block;">
<div class="tooltip-arrow"></div><div class="tooltip-inner">TEST TEST TEST TEST TEST TEST TEST TEST VERY VER LOOOONG TEST</div>
</div>
</td>
<td width="7%" class="center td-name">wassy</td>
</tr>

已获得

<tr class="row0">
<td width="7%" class="center td-input_sistemazione">A4 + CAR</td>
<td width="7%" class="center td-input_destinazione">Ancona-Igoumenitsa</td>
<td width="7%" class="center td-input_datetime">2019-08-13</td>
<td width="7%" class="center td-input_time">13:30</td>
<td width="7%" class="center td-input_stagione">Bassa</td>
<td width="7%" class="center td-input_optiondate">2019-07-25</td>
<td width="7%" class="center td-input_issued">no</td>
<td width="7%" class="center td-input_appunti">TEST TEST TEST TEST TEST TEST TEST TEST VERY VER LOOOONG TEST</td>
<div class="tooltip fade top in" style="top: 372px; left: 946.5px; display: block;">
<div class="tooltip-arrow"></div><div class="tooltip-inner">TEST TEST TEST TEST TEST TEST TEST TEST VERY VER LOOOONG TEST</div>
</div>
<td width="7%" class="center td-name">wassy</td>
</tr>

非常感谢

Answer 1

以这种方式固定

<script>
jQuery(function($) {
$( ".td-input_appunti" ).wrapInner( '<span class="tooltipfix"></span>');
$(document).on("mouseenter", ".td-input_appunti", function () {
     var $this = $(this);
     if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
         $(".tooltipfix").tooltip({
             title: $this.text(),
             position: { my: "bottom" }
         });
     }
 });
 });
</script>

在td内附加jquery工具提示

1 个答案: