如何使内容在另一个下方显示（例如 <li> 列表）在悬停中使用jquery / js

Question

我试图显示一些悬停在文本上方的内容，其中内容列出了各种HTTP错误代码。 在我下面有3个图标和文本，在悬停时，根据我悬停的文本将显示不同的内容：

成功 错误 受阻

以下是js：

$(".icon").on("hover", function(event){
                var ele = $(this);
                var myindex =  $(this).parent().index();
                var longlabel = "";
                switch (someData[myindex]) {
                    case "Success": {
                        longLabel = '200 OK: Standard response for successfull HTTP requests'
                        break;
                    }
                    case "Blocked" :{
                        longLabel = 'Error response Code: 403 Developer is not authorized'
                        break;
                    }
                    case "Error" :{
                        longLabel = 'Error repsonse codes: 400 Bad request, 404 Not Found, 500 Internal Server Error, 503 Service Unavailable, 504 Gateway Timeout'
                        break;
                    }

                }
               nv.tooltip.show('<p>' + longLabel + '</p>');               
            });

现在，我希望能够以悬停列表的形式显示内容，例如：

 Error response codes:
 400 Bad request
 404 Not Found
 500 Internal Server Error
 503 Service Unavailable
 504 Gateway Timeout

而不是即时通讯目前显示：

如何使这些代码一个出现在另一个下面？ 有任何想法吗？？ 谢谢！

Answer 1

代替<p></p>块，也许只使用无序列表即可： <ul></ul>

$(".icon").on("hover", function(event){
    var ele = $(this);
    var myindex =  $(this).parent().index();
    var longlabel;
    switch (someData[myindex]) {
        case "Success": {
            longLabel = ['200 OK: Standard response for successfull HTTP requests'];
            break;
        }
        case "Blocked" :{
            longLabel = ['403 Developer is not authorized'];
            break;
        }
        case "Error" :{
            longLabel = ['400 Bad request', '404 Not Found', '500 Internal Server Error', '503 Service Unavailable', '504 Gateway Timeout'];
            break;
        }
    }
    nv.tooltip.show('Error response codes:<br><ul><li>' + longLabel.join('</li><li>') + '</li></ul>');
});

另外，也可以在两者之间插入<br>

nv.tooltip.show('Error response codes:<br>' + longLabel.join('<br>'));

Answer 2

$.fn.breakLines = function (text) {
    this.text(text);
    this.html(this.html().replace(/\n/g, '<br/>'));
    return this;
}


$(".icon").on("hover", function (event) {
    var ele = $(this);
    var myindex = $(this).parent().index();
    var longlabel = "";
    switch (someData[myindex]) {
        case "Success":
            {
                longLabel = '200 OK: \n Standard response for successfull HTTP requests'
                break;
            }
        case "Blocked":
            {
                longLabel = 'Error response Code: \n 403 Developer is not authorized'
                break;
            }
        case "Error":
            {
                longLabel = 'Error repsonse codes: \n 400 Bad request,\n 404 Not Found, \n 500 Internal Server Error, \n 503 Service Unavailable, \n 504 Gateway Timeout'
                break;
            }

    }
    nv.tooltip.show().breakLines('<p>' + longLabel + '</p>');;
});

Answer 3

尝试这个：

longLabel = 'Error repsonse codes: 400 Bad request, 404 Not Found, 500 Internal Server Error, 503 Service Unavailable, 504 Gateway Timeout';
longLabel = longLabel.replace(/\:/g, ":<br>");
$("p").html(longLabel.replace(/\,/g, ":<br>"));