如何使內容在另一個下方顯示（例如 <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>"));