If you want to know how to create the tooltip widget as well as understand its commonly used options, methods, and events. You have came to the right place

This widget is used to select a numeric value by dragging a handle. The following is the syntax for creating the slider widget:
$(selector).tooltip()

$(selector).tooltip(options)

A tooltip can be attached to any HTML element. When the mouse hovers over the selected elements, a customizable tooltip can be displayed as text, an image, or any valid HTML content. Tooltip content can be static or derived from data retrieved from AJAX calls.

FOUR STEPS TO BUILD JQUERY TOOLTIP WIDGET :

1. Add jquery-ui css cdn to the html document
2. Add to the jquery cdn to the html document
3. Add to the jquery ui js cdn to the html document
4. Make file named "tooltip..html" with given code.

STEP ONE: Add jquery-ui css cdn to the html document

STEP TWO: Add to the jquery cdn to the html document

STEP THREE: Add to the jquery ui js cdn to the html document

STEP FOUR: Make file named "tooltip.html" with given code.

<!DOCTYPE html>
<html lang="en">
 <head>   
   <meta charset="utf-8"> 
     <link rel="stylesheet" href="styles/jquery-ui.min.css"> 
     <script src="scripts/jquery-2.1.0.min.js"></script>      
<script src="scripts/jquery-ui.min.js"></script>          

<script>      $(function() {             

$("input").tooltip();
  
$( "li" ).tooltip({              

items: "li",              content: function() {                    

var element = $( this ); 

if ( element.is( "[title]" ) )
 
{                    return element.attr( "title" );                    } 

else if ( element.is( "li" ) ) 

{                    var countryName = element.text();                            return "<img src='images/" + countryName + ".png'>";                    } 

}             });       });      

</script> 

</head> 

<body>      

<div class="ui-widget">       Name: <input type="text" title="LastName, FirstName"><br><br> 

G8 Countries:       <ul>             

<li>Canada</li>
             
<li title="(2014) President François Hollande">France</li>
             
<li title="(2014) Chancellor Angela Merkel">Germany</li>
             
<li>Italy</li>             

<li title="(2014) Prime Minister Shinz Abe">Japan</li>             

<li title="(2014) President Vladimir Putin">Russia</li>
             
<li title="(2014) Prime Minister David Cameron">United Kingdom</li>             

<li title="(2014) President Barack Obama">United States</li>

       </ul>      

  </div> 

  </body> 

  </html>

How It Works
Within the document ready function of this example, there are two instances of setting a tooltip for HTML elements. In the first instance, $("input").tooltip() sets the tooltip for all input HTML elements. When the user hovers over the input field, the value of the title attribute is displayed as a bubble help. In the second instance, the following code is used to set the tooltip widget for the li HTML elements.
CHAPTER 10 ■ JQUERY UI
337
$( "li" ).tooltip({ items: "li", content: function() { var element = $( this );
if ( element.is( "[title]" ) ) { return element.attr( "title" ); } else if ( element.is( "li" ) ) { var countryName = element.text(); return "<img src='images/" + countryName + ".png'>"; }
} });
The following is the explanation of this code: The •฀ items option specifies which items should show the tooltip. All valid selectors can be used to set its value. The •฀ content option is used to set the content of the tooltip. Its value can be a string or a function. The return value of the function is used to display the tooltip content. •฀ var element = $(this)—sets the variable element to the current HTML element. If the current element has an attribute called •฀ title, the function returns the value of the title attribute; otherwise, the image element with a source of CountryName.png is returned.

The other commonly used options for the slider widget are:
•฀ tooltipClass—Specifies the CSS class for the popup tooltip.

The commonly used methods for the slider widget are:
open()—Programmatically opens a tooltip. For example, you can call it in the field’s focus callback function.

The CSS classes specific to the slider widget are:

ui-tooltip—Used for the outer container of the tooltip widget. •฀ ui-tooltip-content—Used for the content of the tooltip widget.

No comments:

Post a Comment