jQWidgets jqxTooltip position属性用法及代码示例

jQWidgets 是一个 JavaScript 框架，用于为 PC 和移动设备制作基于 Web 的应用程序。它是一个非常强大、经过优化、与平台无关且得到广泛支持的框架。 jqxTooltip 是一个 jQuery 小部件，用于显示弹出消息。 jqxTooltip 小部件可以与任何 HTML 元素结合使用。

position 属性用于设置或返回 jqxTooltip 小部件的位置。它接受 String 类型的值，默认值为 ‘default’。

可能的值如下

‘top’：工具提示显示在宿主元素上方的位置。
‘bottom’：工具提示显示在宿主元素下方的位置。
‘left’：工具提示显示的位置在宿主元素的左侧。
‘right’：工具提示显示的位置在宿主元素的右侧。
'左上方'：工具提示显示的位置在宿主元素的左上角。
'左下方'：工具提示显示的位置在宿主元素的左下角。
'右上'：工具提示显示的位置在宿主元素的右上角。
‘右下’：工具提示显示的位置在宿主元素的右下角。
‘absolute’：工具提示显示在宿主元素的绝对位置上的位置。绝对位置由坐标属性 absolutePositionX 和 absolutePositionY 定义。
‘mouse’：在宿主元素的鼠标光标位置经过一小段时间后工具提示显示的位置。
‘mouseenter’：鼠标光标进入宿主元素的工具提示显示位置。
‘default’：工具提示显示的位置在宿主元素的右下角。

用法:

设置位置属性。

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

返回位置属性。

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

链接文件：从给定的链接下载 jQWidgets。在 HTML 文件中，找到下载文件夹中的脚本文件。

<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>

例：下面的示例说明了 jQWidgets jqxTooltip 位置属性。

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>

输出：

参考： https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtooltip/jquery-tooltip-api.htm

相关用法

注：本文由纯净天空筛选整理自AshokJaiswal大神的英文原创作品 jQWidgets jqxTooltip position Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。