'add multi text to tooltip based on condition (for loop) - Javascript

In the following project, I have the array_num[] which holds the line number of the textarea ( the line number of errors that I want to detect) because I'm building the textarea as a code editor. The array[] holds the description of the error. Everything works fine when clicking the button.. but the issue is that sometime I will have three errors in the same line as the attached example. in other words, I want to display 3 texts on the same line in the tooltip. I've attached the code.

 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        indentUnit: 4,
        gutters: ["CodeMirror-lint-markers"],
    });

    function makeMarker(text) {
        var marker = document.createElement("div");
        const child = document.createElement('div');
        child.setAttribute('data-tooltip', text);
        child.innerText = "⚠️";
        marker.appendChild(child);


        //   marker.innerHTML = "<div data-tooltip=\"" + text+"\" >⚠️</div>";
        return marker;
    }

    function Add() {
        var array_num = [1, 1,1, 3, 4]
    var array = ["Error 1 - the reasons is .... ", "Error 2 - the reasons is .... ", "Error 3- the reasons is ....", "Error 4 - the reasons is ....","Error 5 - the reasons is ...."];
        for (let i = 0; i < array_num.length; i++) {
            editor.doc.setGutterMarker(array_num[i] - 1, "CodeMirror-lint-markers", makeMarker(array[i]));
       

        }



        // editor.doc.setGutterMarker(2-1, "CodeMirror-lint-markers", makeMarker("Hellow world 2 this is error 2 "));
        // editor.doc.setGutterMarker(2-1, "CodeMirror-lint-markers", makeMarker("Hellow world 3 this is error 3"));
        // editor.doc.setGutterMarker(4-1, "CodeMirror-lint-markers", makeMarker("Hellow world 2 this is error 4"));
    }

    function Remove() {

        editor.doc.clearGutter('CodeMirror-lint-markers');
    }

[data-tooltip]:before {
        /* needed - do not touch */
        content: attr(data-tooltip);
        position: absolute;
        opacity: 0;

        /* customizable */
        transition: all 0.15s ease;
        padding: 10px;
        color: #333;
        height: auto;
        width: 160px;
        /* border-width: 10px; */
        box-shadow: 2px 2px 1px silver;
    }

    [data-tooltip]:hover:before {
        /* needed - do not touch */
        opacity: 1;

        /* customizable */
        background: yellow;
        /* margin-top: -50px; */
        margin-left: 30px;
    }

    [data-tooltip]:not([data-tooltip-persistent]):before {
        pointer-events: none;
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.js"
        integrity="sha512-/8pAp30QGvOa8tNBv7WmWiPFgYGOg2JdVtqI8vK+xZsqWHnNd939v9s+zJHXZcJe5wPD44D66zz+CLTD3KacYA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.css"
        integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <textarea id="code" name="code" placeholder="Code goes here...">
        mycode
            pass
        
        a__ = 5
        Check 
        Hello World
        123456
    </textarea>

    <br>

    <button onclick="Add()">Add All</button>
    <br>
    <button onclick="Remove()">Remove All</button>

</body>

</html>

the desire result is, when hover on line number 1, I would like to see three different texts as the following.

Error 1 - the reasons is ....

Error 2 - the reasons is ....

Error 3- the reasons is ....

javascript codemirror

Solution 1:^[1]

To solve this, you need to construct array with error messages before rendering marks and join all error messages for one line with "\n":

function Add() {
    var array_num = [1, 1, 1, 3, 4]
    var array = ["Error 1 - the reasons is .... ", "Error 2 - the reasons is .... ", "Error 3- the reasons is ....", "Error 4 - the reasons is ....","Error 5 - the reasons is ...."];
    var err_messages = {};
    for (let i = 0; i < array_num.length; i++) {
        var lineErr = array_num[i];
        if(err_messages[lineErr]){
            err_messages[lineErr]=err_messages[lineErr] + '\n' + array[i];
        }else{
            err_messages[lineErr]=array[i];
        }
    }
    var err_messages_to_arr = Object.values(err_messages);
    
    for (let i = 0; i < err_messages_to_arr.length; i++) {
        editor.doc.setGutterMarker(i + 1, "CodeMirror-lint-markers", makeMarker(err_messages_to_arr[i]));
    }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Anna Miroshnichenko

'add multi text to tooltip based on condition (for loop) - Javascript

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]