Home jQuery How to solve Jquery tooltip by using Jquery UI?

How to solve Jquery tooltip by using Jquery UI?

by Shahriar Sagor
tooltip by using Jquery UI

Today now in this post i will show you How to solve Jquery tooltip by using Jquery UI? We know that Jquery UI is a lots of collection of GUI widgets as like datepicker, tab, timepicker, colorpicker etc. So in Jquery UI is also provide the tooltip GUI widget on that way we can set the text and can display when hover on the specific element.

By using Jquery UI tooltip we can easily set the information about element as like if we set the delete button but when any user will mouseover then display text as like “You can remove from here”.

So now in this simple html example through we understand and know how to set tooltip by using jquery ui.

Example:
<html lang="en">
<head>
    <title>Jquery ui tooltip example</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>
<body>
<div class="container">
  <button title="Jquery UI Tooltip Example">See Toltip</button>
  <script type="text/javascript">
      $( function() {
        $( document ).tooltip();
      } );
  </script>
</div>
</body>
</html>

Read Also: How to convert file extension using CloudConvert in laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like