Tips for displaying content in a stacked format when hovering, similar to a list item (<li>), using jquery/javascript

Question

Tips for displaying content in a stacked format when hovering, similar to a list item (<li>), using jquery/javascript

I am attempting to display different content on hover over text, specifically listing various HTTP error codes. My setup includes 3 icons and text that will reveal specific content based on the text hovered over:

success error blocked

Below is the JS code:

$(".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 successful HTTP requests'
                        break;
                    }
                    case "Blocked" :{
                        longLabel = 'Error response Code: 403 Developer is not authorized'
                        break;
                    }
                    case "Error" :{
                        longLabel = 'Error response codes: 400 Bad request, 404 Not Found, 500 Internal Server Error, 503 Service Unavailable, 504 Gateway Timeout'
                        break;
                    }

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

Currently, I want to display the content as a list when hovering, like this:

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

Instead of the way it is being displayed now:

Does anyone have suggestions on how I can make these codes appear in a vertical list format? Any ideas would be appreciated!

javascript jquery css

Answer 1

Answer №1

Instead of using a  block, consider utilizing an unordered list: <ul></ul>

$(".icon").on("hover", function(event){
    var element = $(this);
    var index =  $(this).parent().index();
    var description;
    switch (someData[index]) {
        case "Success": {
            description = ['200 OK: Standard response for successful HTTP requests'];
            break;
        }
        case "Blocked" :{
            description = ['403 Developer is not authorized'];
            break;
        }
        case "Error" :{
            description = ['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>' + description.join('</li><li>') + '</li></ul>');
});

Alternatively, you can simply use   in between

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

Answer 2

Instead of using a  block, consider utilizing an unordered list: <ul></ul>

$(".icon").on("hover", function(event){
    var element = $(this);
    var index =  $(this).parent().index();
    var description;
    switch (someData[index]) {
        case "Success": {
            description = ['200 OK: Standard response for successful HTTP requests'];
            break;
        }
        case "Blocked" :{
            description = ['403 Developer is not authorized'];
            break;
        }
        case "Error" :{
            description = ['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>' + description.join('</li><li>') + '</li></ul>');
});

Alternatively, you can simply use   in between

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

Answer 3

Answer №2

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


$(".image").on("hover", function (event) {
    var element = $(this);
    var index = $(this).parent().index();
    var detailedInfo = "";
    switch (someDetails[index]) {
        case "Success":
            {
                detailedInfo = '200 OK: \n Standard response for successful HTTP requests'
                break;
            }
        case "Blocked":
            {
                detailedInfo = 'Error response Code: \n 403 Developer is not authorized'
                break;
            }
        case "Error":
            {
                detailedInfo = 'Error response 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().modifyText('<p>' + detailedInfo + '</p>');;
});

Answer 4

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


$(".image").on("hover", function (event) {
    var element = $(this);
    var index = $(this).parent().index();
    var detailedInfo = "";
    switch (someDetails[index]) {
        case "Success":
            {
                detailedInfo = '200 OK: \n Standard response for successful HTTP requests'
                break;
            }
        case "Blocked":
            {
                detailedInfo = 'Error response Code: \n 403 Developer is not authorized'
                break;
            }
        case "Error":
            {
                detailedInfo = 'Error response 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().modifyText('<p>' + detailedInfo + '</p>');;
});

Answer 5

Answer №3

Give this a shot:

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

Answer 6

Give this a shot:

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

Tips for displaying content in a stacked format when hovering, similar to a list item (<li>), using jquery/javascript

Answer №1

Answer №2

Answer №3

Similar questions

Enhancing the ShaderMaterial attribute in three.js

Combine JavaScript array objects based on their unique IDs

Can one button be clicked to trigger the activation of another button through a click?

AngularJS supports asynchronous validation on blur

Validating (Update database with correct email and token)

Adding a class to radio buttons with a specific label using jQuery

Tips for aligning meshes to the left and ensuring responsiveness in three.js

Include a new feature within an onClick event

Ensuring elements are correctly positioned

Retrieving JSON data from a form in a Node.js application

A guide to defining a color variable in React JS

Steps to display a text box once the dropdown list is updated

NodeJS/express: server became unresponsive after running for some time

Converting RSS title to HTML format with the help of JavaScript

Getting PHP Post data into a jQuery ajax request can be achieved by using the `$_POST

ES6 Generators: lack of informative stack trace when using iterator.throw(err)

Is there a way to trigger an Axios response without repeated calls or the use of a button?

Trigger the opening of a bootstrap modal from an external source on the current page

The addEventListener method fails to respond to changes in input

Is there a way to arrange the navigation items to appear on the right side upon toggler click?