What is the best way to implement <li> in place of <div> to ensure the tool-tip code functions properly?

Question

What is the best way to implement <li> in place of <div> to ensure the tool-tip code functions properly?

To see an example, please refer to this fiddle: http://jsfiddle.net/66nLy/12/ I am looking to achieve a similar functionality on a webpage, but using <li> instead of <div>. Here is the HTML code snippet:

<table class="base-table selection-table" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:15px;">
        <tr class="evenRow" id="37261">
            <td class="question">
                <ul class="tabl-head">
                    <li>Question 1.</li>
                    <li class="center-align">**Report question issue - QUE37261**</li>
                    <li class="right-align"><a class="change_ps_question" href="change_practice_sheet_question.php?question_id=37261&practice_sheet_id=3"><label class="bright" style="cursor:pointer;" >Change Question</label></a>
                    </li>
                </ul>
                <ul class="options w-auto">
                    <li><strong>Question:</strong>
    Pair of contrasting characters controlling the same trait is called:</li>
                    <li><strong>Answer:</strong>

                        <p><b style="font-size:13px;">1.</b>&nbsp;&nbsp; Factors
                            <br />
                        </p>
                        <p><b style="font-size:13px;">2.</b>&nbsp;&nbsp; alleles
                            <br />
                        </p>
                        <p><b style="font-size:13px;">3.</b>&nbsp;&nbsp; alloloci
                            <br />
                        </p>
                        <p><b style="font-size:13px;">4.</b>&nbsp;&nbsp; paramorphs
                            <br />
                        </p>
                    </li>
                    <li><strong>Correct Answer Option : 2</strong>
                    </li>
                </ul>
            </td>
        </tr>
    </table>

This table contains multiple records, but for simplicity, I have only displayed one record.

javascript jquery html css

Answer 1

Answer №1

Hey there, check this out: http://jsfiddle.net/webcarvers/66nLy/17/

HTML:

<li class='tooltip'>
    <img src='http://www.craiglotter.co.za/wp-content/uploads/2009/12/craig_question_mark_icon1.png' alt='Help' />
    <ul class="tooltipText">
        <li class='info'>Populate this box with some text.</li>
    </ul>
</li>

css:

li{
   display:block;
}
li.tooltip
{
  position:relative;
  display:inline-block;
  cursor:pointer;
  width:300px;
  text-align:right;
}
li.tooltip > ul li.info
{
  display:none;
}
li.tooltip > ul li.info_container
{
  position:absolute;
  right:20px;
  width:200px;
  height:100px;
  display:none;
    color:#000;
}
li.tooltip ul li.info
{
  text-align:left;
  position:absolute;
  left:1px;
  right:1px;
  top:20px;
  bottom:1px;
  color:#000;
  padding:5px;
  overflow:auto;
  border:1px solid #000;
}

JS:

"use strict";

function click(event) {
    var elem = this.parentNode.querySelector('.info_container');
    if (elem) 
        elem.style.display = elem.style.display === 'block' ? 'none' : 'block';
}

function toolify() {
    var idx,
    len,
    elem,
    info,
    text,
    elements = document.querySelectorAll('li.tooltip'),
        canvas,
        imgurl,
        pointer,
        tipHeight = 20,
        tipWidth = 20,
        width = 200,
        height = 100,
        ctx;

    // Create a canvas element where the triangle will be drawn
    canvas = document.createElement('canvas');
    canvas.width = tipHeight;
    canvas.height = tipWidth;
    ctx = canvas.getContext('2d');

    ctx.strokeStyle = '#000'; // Border color
    ctx.fillStyle = '#fff'; // background color
    ctx.lineWidth = 1;

    ctx.translate(-0.5, -0.5); // Move half pixel to make sharp lines
    ctx.beginPath();
    ctx.moveTo(1, canvas.height); // lower left corner
    ctx.lineTo(canvas.width, 1); // upper right corner
    ctx.lineTo(canvas.width, canvas.height); // lower right corner
    ctx.fill(); // fill the background
    ctx.stroke(); // stroke it with border
    //fix bottom row
    ctx.fillRect(0, canvas.height - 0.5, canvas.width - 1, canvas.height + 2);

    // Create a div element where the triangel will be set as background
    pointer = document.createElement('li');
    pointer.style.width = canvas.width + 'px';
    pointer.style.height = canvas.height + 'px';
    pointer.innerHTML = '&nbsp;' // non breaking space
    pointer.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
    pointer.style.position = 'absolute';
    pointer.style.top = '2px';
    pointer.style.right = '1px';
    pointer.style.zIndex = '1'; // place it over the other elements

    console.log(elements.length);
    for (idx = 0, len = elements.length; idx < len; ++idx) {
        elem = elements[idx];
        elem.querySelector('img').addEventListener('click', click);
        text = elem.querySelector('ul li.info');
        // Create a new div element, and place the text and pointer in it
        info = document.createElement('li');
        text.parentNode.replaceChild(info, text);
        info.className = 'info_container';
        info.appendChild(pointer.cloneNode());
        info.appendChild(text);
        text.style.display = 'block';
        //info.addEventListener('click',click);
    }
}
window.addEventListener('load', toolify);

Answer 2

Hey there, check this out: http://jsfiddle.net/webcarvers/66nLy/17/

HTML:

<li class='tooltip'>
    <img src='http://www.craiglotter.co.za/wp-content/uploads/2009/12/craig_question_mark_icon1.png' alt='Help' />
    <ul class="tooltipText">
        <li class='info'>Populate this box with some text.</li>
    </ul>
</li>

css:

li{
   display:block;
}
li.tooltip
{
  position:relative;
  display:inline-block;
  cursor:pointer;
  width:300px;
  text-align:right;
}
li.tooltip > ul li.info
{
  display:none;
}
li.tooltip > ul li.info_container
{
  position:absolute;
  right:20px;
  width:200px;
  height:100px;
  display:none;
    color:#000;
}
li.tooltip ul li.info
{
  text-align:left;
  position:absolute;
  left:1px;
  right:1px;
  top:20px;
  bottom:1px;
  color:#000;
  padding:5px;
  overflow:auto;
  border:1px solid #000;
}

JS:

"use strict";

function click(event) {
    var elem = this.parentNode.querySelector('.info_container');
    if (elem) 
        elem.style.display = elem.style.display === 'block' ? 'none' : 'block';
}

function toolify() {
    var idx,
    len,
    elem,
    info,
    text,
    elements = document.querySelectorAll('li.tooltip'),
        canvas,
        imgurl,
        pointer,
        tipHeight = 20,
        tipWidth = 20,
        width = 200,
        height = 100,
        ctx;

    // Create a canvas element where the triangle will be drawn
    canvas = document.createElement('canvas');
    canvas.width = tipHeight;
    canvas.height = tipWidth;
    ctx = canvas.getContext('2d');

    ctx.strokeStyle = '#000'; // Border color
    ctx.fillStyle = '#fff'; // background color
    ctx.lineWidth = 1;

    ctx.translate(-0.5, -0.5); // Move half pixel to make sharp lines
    ctx.beginPath();
    ctx.moveTo(1, canvas.height); // lower left corner
    ctx.lineTo(canvas.width, 1); // upper right corner
    ctx.lineTo(canvas.width, canvas.height); // lower right corner
    ctx.fill(); // fill the background
    ctx.stroke(); // stroke it with border
    //fix bottom row
    ctx.fillRect(0, canvas.height - 0.5, canvas.width - 1, canvas.height + 2);

    // Create a div element where the triangel will be set as background
    pointer = document.createElement('li');
    pointer.style.width = canvas.width + 'px';
    pointer.style.height = canvas.height + 'px';
    pointer.innerHTML = '&nbsp;' // non breaking space
    pointer.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
    pointer.style.position = 'absolute';
    pointer.style.top = '2px';
    pointer.style.right = '1px';
    pointer.style.zIndex = '1'; // place it over the other elements

    console.log(elements.length);
    for (idx = 0, len = elements.length; idx < len; ++idx) {
        elem = elements[idx];
        elem.querySelector('img').addEventListener('click', click);
        text = elem.querySelector('ul li.info');
        // Create a new div element, and place the text and pointer in it
        info = document.createElement('li');
        text.parentNode.replaceChild(info, text);
        info.className = 'info_container';
        info.appendChild(pointer.cloneNode());
        info.appendChild(text);
        text.style.display = 'block';
        //info.addEventListener('click',click);
    }
}
window.addEventListener('load', toolify);

Answer 3

Answer №2

If you want to make some changes to your HTML, you can try the following:

<ul>
    <li class='info'>
        Insert your desired text here.......
    </li>
</ul>

For script changes, you can use the following code:

text = elem.querySelector('li.info');

And for CSS changes:

div.tooltip > li.info
{
    display:none;
}

div.tooltip li.info
{
    text-align:left;
    position:absolute;
    left:1px;
    right:1px;
    top:20px;
    bottom:1px;
    color:#000;
    padding:5px;
    overflow:auto;
    border:1px solid #000;
}

Answer 4

If you want to make some changes to your HTML, you can try the following:

<ul>
    <li class='info'>
        Insert your desired text here.......
    </li>
</ul>

For script changes, you can use the following code:

text = elem.querySelector('li.info');

And for CSS changes:

div.tooltip > li.info
{
    display:none;
}

div.tooltip li.info
{
    text-align:left;
    position:absolute;
    left:1px;
    right:1px;
    top:20px;
    bottom:1px;
    color:#000;
    padding:5px;
    overflow:auto;
    border:1px solid #000;
}

What is the best way to implement <li> in place of <div> to ensure the tool-tip code functions properly?

Answer №1

Answer №2

Similar questions

Bringing in a variable from a React component to a JavaScript file

Achieving proper functionality of additional directives within uib-tab components

Preventing event propagation in jQuery's click handler

Using the "export default" feature in React.js is a

Showing the unique identifier instead of the actual data in HTML for a Firebase Object using Angularfire

Adjust the element colors within a Vue loop with dynamic changes

What causes the oninput event to act differently in Angular as opposed to regular JavaScript?

"Unlocking the Power: Sending a Complex JSON Object to PHP from the Dojo

What is the best way to retrieve dates from a MySQL database using ExpressJS?

Issue with Type-Error when accessing theme using StyledComponents and TypeScript in Material-UI(React)

What is the method to render certain text as bold using a json string?

Restricting the embedding of my website to a select few domains

What is the best way to utilize AJAX in sending chosen files to a PHP script?

When a parameter is passed into a React-Query function with an undefined value, it can lead to the API returning a 404 error

Enhancing transparency with a touch of background color

Show the template when the link is clicked using Angular directive

How about using a circle inset clip path technique?

Triggering the Bootstrap Carousel to begin when the window has finished loading, following the completion of the loading

Tips for converting a parent class Sprite into a subclass MySprite in Cocos2d-JS

Unable to transform Symbol data into a string - Error when making a React AJAX delete call