javascript - 如何使用 jquery/js 使内容在悬停时显示在另一个下方(如 <li> 列表)

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> block ，也许只使用无序列表:<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>'));