如何使列的内容显示在工具提示时悬停?HTML5

Question

我使用一个HTML表来显示我的网页上的内容。我在弄清楚如何使列内容显示时，它是悬停在麻烦。例如，如果我将鼠标悬停在表上的单元格上(启用了工具提示)，则该单元格的内容应该出现在工具提示中。

我目前正在使用JavaScript &J查询构建表，我已经包含了静态数据显示在表中:

var AuditLog = [
    { UserID: "DJoe1", Action: "loggedIn", Date: "17 July 2014 11:02", AppID:"MyRoster", DeviceID: "-", Notes: "None" },
    { UserID: "DJoe2", Action: "loggedIn", Date: "17 July 2014 10:49", AppID: "Train Dispatch", DeviceID: "-", Notes: "None" },
    { UserID: "DJoe3", Action: "loggedIn", Date: "17 July 2014 10:29", AppID: "MyRoster", DeviceID: "-", Notes: "None" },
    { UserID: "LJenkins2", Action: "loggedIn", Date: "17 July 2014 10:15", AppID: "Train Dispatch", DeviceID: "-", Notes: "None" },
    { UserID: "LJenkins1", Action: "loggedIn", Date: "17 July 2014 10:11", AppID: "Train Dispatch", DeviceID: "-", Notes: "None" }
    ];

需要工具提示的列是Notes列。表结构:

                 var AuditHTML = "<table class='tablesorter full_width_table info_table_style ui-body-d ui-shadow table-stripe ui-responsive' id='auditTable'>" +
                    "<thead >" +
                       "<tr class='ui-bar-b schedule_row '>" +
                         "<th>User ID</th>" +
                         "<th>Action</th>" +
                         "<th>Date</th>" +
                         "<th>App ID</th>" +
                         "<th>Device ID</th>" +
                         "<th>Notes</th>" +
                       "</tr>" +
                     "</thead>" +
                     "<tbody>";
    for (s = 0; s < AuditLog.length; s++) {
        AuditHTML += "<tr class='schedule_row display' id='auditTr_" + s + "'>" +
          "<td> " + AuditLog[s].UserID + "</td>" +
                  "<td> " + AuditLog[s].Action + "</td>" +
                  "<td> " + AuditLog[s].Date + "</td>" +
                  "<td> " + AuditLog[s].AppID + "</td>" +
                  "<td> " + AuditLog[s].DeviceID + "</td>" +
                  "<td> " + AuditLog[s].Notes + "</td>";
        AuditHTML += "</tr>";
    }
    AuditHTML += "</tbody></table>";
$("#auditContent").html(AuditHTML);

我使用了一个div来显示页面上的表格:

  <div id="auditContent">
        </div>

任何帮助将是伟大的!

Answer 1

以下是我为解决你的问题所做的努力。首先，我稍微改变了一下这个javascript变量，以增加前两个注释的长度:

var AuditLog = [
{ UserID: "DJoe1", Action: "loggedIn", Date: "17 July 2014 11:02", AppID:"MyRoster", DeviceID: "-", Notes: "Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text " },
{ UserID: "DJoe2", Action: "loggedIn", Date: "17 July 2014 10:49", AppID: "Train Dispatch", DeviceID: "-", Notes: "Long content Long content Long content Long content Long content Long content Long content Long content Long content Long content Long content Long content Long content Long content Long content " },
{ UserID: "DJoe3", Action: "loggedIn", Date: "17 July 2014 10:29", AppID: "MyRoster", DeviceID: "-", Notes: "None" },
{ UserID: "LJenkins2", Action: "loggedIn", Date: "17 July 2014 10:15", AppID: "Train Dispatch", DeviceID: "-", Notes: "None" },
{ UserID: "LJenkins1", Action: "loggedIn", Date: "17 July 2014 10:11", AppID: "Train Dispatch", DeviceID: "-", Notes: "None" }
]; 

在剩下的Javascript代码中，我只是添加了一个类note:

"<td class='note'> " + AuditLog[s].Notes + "</td>";

我还使用了一些CSS:

td, th{
    border:solid gray 1px;
    text-align:center;
    padding:5px;
}
table{
    border-collapse:collapse;
}
.note{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden; 
    width:200px;
    max-width: 200px;
}

最后，我添加了一个jquery事件来动画元素的悬停:

$('.note').hover(
            function(event){
                $(event.target).css({
                        "white-space":"normal",
                        "text-overflow":"clip",                     
                        "background-color":"#eeeeee",
                        "max-width":"500px",
                        "position":"absolute"
                    });
            }, function(event){
                $(event.target).css({
                        "white-space":"nowrap",
                        "text-overflow":"ellipsis",                     
                        "background-color":"transparent",
                        "max-width":"200px",
                        "position":"static"
                    });
            }
);

这是一个基本的解决方案，但我认为你可以用它来改进它

Answer 2

当鼠标移到列上或工具提示上时，您想显示内容吗?

如果你想在鼠标上显示列上的内容，那么你可以添加onmouseover事件到HTML表的单元格/行，并根据需要隐藏/显示内容。

或者如果你想显示为工具提示

在鼠标上方添加span标签和显示span标签。

<span onMouseOver="toolTip('simple Tooltip Text here')" onMouseOut="toolTip()"
class="Text">Simple Tooltip</span>

查看此链接查看示例