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

StackOverflow https://stackoverflow.com/questions/20367691

  •  28-08-2022
  •  | 
  •  

Question

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

Was it helpful?

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top