locked
ASP.net, C#, Tooltip help text shows on desktop browser mouseover, but not on mobile, how to show a tooltip for desktop and mobile RRS feed

  • Question

  • User1045460610 posted

    I used a tootip for a help text. It shows on mouseover on browser. On mobile I don't see it at all. If you tap it there is a Flickr. What's a good way to show help text on desktop browser and mobile?

    <body>
    <form id="form1" runat="server">
    <h2 class="auto-style5">
    <asp:Image ID="Image1" runat="server" Height="103px" Width="216px" ImageUrl="~/headerLogo.png" />
    </h2>
    <h2>
    Attendance</h2>
    <h2>
    Student - Next Course</h2>
    <table>
    <tr>
    <td class="auto-style2">
    Student ID:</td>
    <td class="auto-style6"><asp:TextBox ID="txtStudentID" runat="server" Enabled="False" ></asp:TextBox></td>
    <td class="auto-style3">
    &nbsp;</td>
    </tr>
    <tr>
    <td class="auto-style2">
    Student Name:</td>
    <td class="auto-style6">
    <asp:TextBox ID="txtStudentName" runat="server" Enabled="False"></asp:TextBox></td>
    <td class="auto-style3">
    &nbsp;</td>
    </tr>
    <tr>
    <td class="auto-style2">
    Instructor Name</td>
    <td class="auto-style6">
    <asp:TextBox ID="txtInstructorName" runat="server" Enabled="False"></asp:TextBox>
    </td>
    <td class="auto-style3">
    &nbsp;</td>
    </tr>

    <tr>
    <td class="auto-style2">
    Course Code</td>
    <td class="auto-style6">
    <asp:TextBox ID="txtCourseCode" runat="server" Enabled="False"></asp:TextBox></td>
    <td class="auto-style3">
    &nbsp;</td>
    </tr>

    <tr>
    <td class="auto-style2">
    Course Title:</td>
    <td class="auto-style6">
    <asp:TextBox ID="txtCourseTitle" runat="server" Enabled="False"></asp:TextBox></td>
    <td class="auto-style3">
    &nbsp;</td>
    </tr>

    <tr>
    <td class="auto-style2">
    Course Start Time:</td>
    <td class="auto-style6">
    <asp:TextBox ID="txtCourseStartTime" runat="server" Enabled="False"></asp:TextBox></td>
    <td class="auto-style3">
    &nbsp;</td>
    </tr>

    <tr>
    <td class="auto-style2">
    Attendance Code:</td>
    <td class="auto-style6">
    <asp:TextBox ID="txtAttendanceCode" runat="server"></asp:TextBox></td>
    <td class="auto-style3">
    &nbsp;</td>
    </tr>

    </table>
    <br />
    <asp:Button ID="btnAdd" runat="server" Text="Save Code" OnClick="btnAdd_Click" />
    <br />
    <br />
    <asp:Button ID="btnHelp" runat="server" Text="?" ToolTip="Instructions/Notes: You must be in the assigned classroom and on the wireless network to post your attendance. If you do not have a smartphone or laptop, borrow one from a friend or see your instructor. Enter the Attendance Code given out by the instructor for this class session and click Save Code" />
    <br />
    <br />
    <asp:Label ID="lblMsg" runat="server" EnableViewState="False"></asp:Label>
    <br />
    <asp:Label ID="lblMsg3" runat="server" EnableViewState="False" Visible="False"></asp:Label>
    <br />
    <asp:Label ID="lblMsg2" runat="server" EnableViewState="False"></asp:Label>
    <br />
    <br />
    <table>
    <tr>
    <%--<td class="auto-style2">
    Record ID:</td>--%>
    <td>
    <asp:TextBox ID="txtRecordID" runat="server" Enabled="False" Width="192px" Visible="False"></asp:TextBox>
    </td>
    <td class="auto-style4">
    &nbsp;</td>
    </tr>
    <tr>
    <%--<td class="auto-style2">
    UserID:</td>--%>
    <td>
    <asp:TextBox ID="txtUserID" runat="server" Width="192px" Enabled="False" Visible="False"></asp:TextBox></td>
    <td class="auto-style4">
    &nbsp;</td>
    </tr>

    </table>
    <br />
    <br />
    <asp:Panel ID="Panel1" runat="server" Width="216px">
    <br />
    <%--Instructions/Notes:
    <br />
    -You must be in the assigned classroom and on the wireless network to post your attendance.
    <br />
    -If you do not have a smartphone or laptop, borrow from a friend or see your instructor.
    <br />
    -Enter the Attendance Code given out by the instructor for this class session and click Save Code.--%>
    </asp:Panel>
    <br />
    </form>
    </body>

    Tuesday, April 16, 2019 8:02 PM

Answers

  • User-1174608757 posted

    Hi Tom4IT,

    According to your description,in usual ,if you want to show the tooltip message in mobile or browser side, I suggest that you could use javascript.

    For instance,You can fake the title tooltip behavior with Javascript  ,then when you click/tab on an element with a title attribute, a child element with the title text will be appended. Click again and it gets removed.

    Else,you should realize that since there is no mouse in mobile , so we couldn't use mouseover for mobile side ,so in mobile side, we could add button click event to show tooltip message.You only need to make judgement whether it is a mobile or broswer.

    Here is a demo, you could see:

    Aspx:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-3.3.1.js"></script>
        <style type="text/css">
            .more_info {
      border-bottom: 1px dotted;
      ;
    }
    
    .more_info .title {
        ;
        top: 20px;
        background: silver;
        padding: 4px;
        left: 0;
        white-space: nowrap;
    }
    
        </style>
        <script>
            $(function () {
                if (screen.width <= 480) {
                    $(".more_info").click(function () {
                        var title = $(this).find(".title");
                        if (!title.length) {
                            $(this).append('<span class="title">' + $(this).attr("title") + '</span>');
                        } else {
                            title.remove();
                        }
                    });
    
                } else
                {
                    $(".more_info").mouseover(function () {
                        var title = $(this).find(".title");
                        if (!title.length) {
                            $(this).append('<span class="title">' + $(this).attr("title") + '</span>');
                        } else {
                            title.remove();
                        }
                    });
    
                }
    
    
            })
           
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
             <p>An <span class="more_info" title="show tooltip">underline</span> character is used here</p>
            </div>
        </form>
    </body>
    </html>
    

    You could see:

    Best Regards

    Wei

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 17, 2019 3:19 AM