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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。