简体   繁体   中英

Display tooltips in javascript/HTML

I have a HTML table with text box and a button Initially text box is hidden and after press the button it will display. This works perfectly. What I need to do is dispaly a tooltip saying "Enter your name here" on the right side of the text box, at the same time the text box appears. (Not when the mouse over the text box. Need to display the tooltip when the text box appears)

Can anyone please help me to solve this problem?

This is my code so far.

<html>
<head>
    <script>
        function showRow(rowId) {
            document.getElementById(rowId).style.display = "";
        }
    </script>
</head>
<body>
    <table>
        <tr id="r1">
            <td>
                <input type="button" id="click" name="click" value="click" onclick="showRow('r2');"/>
            </td>
        </tr>
        <tr id="r2" style="display: none;">
            <td>
                <input type="text" id="name" name="name"/>
            </td>
        </tr>
    </table>
</body>
<html>

If you want the 'tooltip' to display at the same time, then simply add an element as a child of your <td> element.

From:

<tr id="r2" style="display: none;">
    <td><input type="text" id="name" name="name"></td>
</tr>

To:

<tr id="r2" style="display: none;">
    <td>
        <input type="text" id="name" name="name">
        <label for="name">My Label</label>
    </td>
</tr>

Hopefully that should work. (I dunno if that's what you're asking)

Check this JSFiddle I just created:

https://jsfiddle.net/0mfk3tr3/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM