Search code examples
asp.netlabelweb-controls

How to increase the width of the label ToolTip in ASP.NET


I'm trying to display a long message as a tooltip on a label. A short message will be displayed in that label as Text.

I want to increase the width of the tooltip since the the message is too long. Does anyone can help me out to cater this situation?

Regards, Aruna


Solution

  • You can use jquery to control the width of the tooltip

    check the below code i think it will solve your requirment

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script>
            $(function () {
                $(document).tooltip();
            });
        </script>
        <style>
            label
            {
                display: inline-block;
                width: 5em;
            }
            .ui-tooltip
            {
                width: 210px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <p> <label for="age"> Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
        </div>
        </form>
    </body>
    </html>