How to make a content appear one below the other (like an <li> list) in hover using jquery/js

Question

I'm trying to show some content on hover over the text, where the content lists the various HTTP error codes. Below I have 3 icons and text, on hover, different content will show based on the text I hover:

success error blocked

below is the 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>');               
            });

Now i want to be able to show the content in the form of a list on hover, eg:

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

Instead of which im showing currently:

how can i make these codes appear one below the other? Any ideas?? Thanks!

Answer 1

Instead of a <p></p> block, maybe just use a unordered list: <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>');
});

Alternatively just have <br> in between

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

Try this:

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>"));