locked
Show tool tip on control for description RRS feed

  • Question

  • User1052662409 posted

    HI All,

    I have a requirement that if i have a control on my page it should show its description on a static tool tip.

    Once I finish this control I mean, if the control is a text box then tool tip should gone after typing something in it, if control is a dropdwon then tool tip should gone after selection an item... and so on for every control.

    Please suggest.

    Thursday, March 14, 2019 4:07 AM

Answers

  • User283571144 posted

    Hi demoninside9,

    According to your description, I suggest you could try to set a class for each tooltip element and bind click function with "$('.ui-tooltip').hide()" to achieve hiding the tooltip when click the element.

    More details, you could refer to below codes:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Tooltip - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
      $( function() {
          $(document).tooltip();
    
          $(".test").click(function (e) {
              $('.ui-tooltip').hide();
          }); 
    
      } );
        </script>
        <style>
            label {
                display: inline-block;
                width: 5em;
            }
        </style>
    </head>
    <body>
    
     
         <p><label for="age">Your age:</label><input id="age" class="test" title="We ask for your age only for statistical purposes."></p>
     
    
         <p><label for="age">DropDownList</label><select class="test" title="aaaaaa">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
        </p>
        <p>Hover the field to see the tooltip.</p>
    
    
    </body>
    </html>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 14, 2019 8:29 AM