jQWidgets jqxTooltip position Property

Last Updated : 31 Aug, 2021

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, 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 position property is used to set or return the position of the jqxTooltip widget. It accepts String type value and its default value is ‘default’.

The possible values are as follows

‘top’: The position of the tooltip display above the host element.
‘bottom’: The position of the tooltip display below the host element.
‘left’: The position of the tooltip display is at the left of the host element.
‘right’: The position of the tooltip display is at the right of the host element.
‘top-left’: The position of the tooltip display is at the top-left side of the host element.
‘bottom-left’: The position of the tooltip display is at the bottom-left side of the host element.
‘top-right’: The position of the tooltip display is at the top-right of the host element.
‘bottom-right’: The position of the tooltip display is at the bottom-right of the host element.
‘absolute’: The position of tooltip display on the absolute position of the host element. The absolute position is defined by the coordinate properties absolutePositionX and absolutePositionY.
‘mouse’: The position of tooltip display after a short period of time at the position of the mouse cursor of the host element.
‘mouseenter’: The position of tooltip display where the mouse cursor has entered the host element.
‘default’:The position of the tooltip display is at the bottom-right of the host element.

Syntax:

Set the position property.

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

Return the position property.

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

Linked Files: Download jQWidgets from the given link. 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>

Example: The below example illustrates the jQWidgets jqxTooltip position property.

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 position Property 
        </h3> 
        <br><br> 
  
        <input type="button" id="jqxBtn" 
            style="background: green;" 
            value="GeeksforGeeks" /> 
    </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: 200, 
                height: 30 
            }); 
        }); 
    </script> 
</body> 
  
</html>