jQWidgets jqxTooltip name Property

Last Updated : 01 Sep, 2021

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported framework. The jqxTooltip is a jQuery widget that is used to display a popup message. The jqxTooltip widget can be used in combination with any HTML element.

The name property is used to set or return the name of the tooltip’s group. This property is used to display one tooltip at a time. By default, all tooltips are used in a single group. It accepts String type value and its default value is ”.

Syntax:

Set the name property.

$('Selector').jqxTooltip({ name: String });

Return the name property.

var name = $('Selector').jqxTooltip('name');

Linked Files: Download jQWidgets from the given link https://www.jqwidgets.com/download/. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.energyblue.css”>
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”.jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtooltip.js”></script>

The below example illustrates the jQWidgets jqxTooltip name property.

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
        "jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <link rel="stylesheet" href= 
        "jqwidgets/styles/jqx.energyblue.css"> 
    <script type="text/javascript" 
        src="scripts/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqx-all.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqxcore.js"></script> 
    <script type="text/javascript" 
        src=".jqwidgets/jqxbuttons.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqxtooltip.js"></script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
            jQWidgets jqxTooltip name Property 
        </h3> 
        <br><br> 
  
        <input type="button" id="jqxBtn" 
            style="background: green;" 
            value="GeeksforGeeks" /> 
        <br><br> 
  
        <input type="button" id="jqxBtn1" 
            style="background: green;" 
            value="Geeks" /> 
    </center> 
  
    <script type="text/javascript"> 
        $(document).ready(function() { 
            $('#jqxBtn',).jqxButton({ 
                width: 150, 
                height: 50 
            }); 
  
            $("#jqxBtn").jqxTooltip({ 
                theme: 'energyblue', 
                content: 'A computer science portal', 
                position: 'top', 
                width: 250, 
                height: 30, 
                name: 'tooltipGroup' 
            }); 
  
            $('#jqxBtn1').jqxButton({ 
                width: 150, 
                height: 50 
            }); 
  
            $("#jqxBtn1").jqxTooltip({ 
                theme: 'energyblue', 
                content: 'Welcome GeeksforGeeks', 
                position: 'top', 
                width: 250, 
                height: 30, 
                name: 'tooltipGroup' 
            }); 
        }); 
    </script> 
</body> 
  
</html>