|
absolutePositionX
|
number
|
0
|
Sets or gets the absolutePositionX property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse",absolutePositionX:20, theme:"light" } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
absolutePositionY
|
number
|
0
|
Sets or gets the absolutePositionY property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse",absolutePositionY:20, theme:"light" } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
autoHide
|
boolean
|
true
|
Sets or gets the autoHide property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse",autoHide:false, theme:"light" } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
autoHideDelay
|
number
|
3000
|
Sets or gets the autoHideDelay property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse",autoHideDelay:100, theme:"light" } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
animationShowDelay
|
number
|
'fast'
|
Sets or gets the animationShowDelay property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse",animationShowDelay:2000, theme:"light" } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
animationHideDelay
|
number
|
'fast'
|
Sets or gets the animationHideDelay property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse",animationHideDelay:2000, theme:"light" } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
content
|
string
|
''
|
Sets or gets the content property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light" } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
closeOnClick
|
boolean
|
true
|
Sets or gets the closeOnClick property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light",closeOnClick:false } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light",disabled:true } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
enableBrowserBoundsDetection
|
boolean
|
true
|
Sets or gets the enableBrowserBoundsDetection property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light",enableBrowserBoundsDetection:true } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
height
|
number
|
'auto'
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light",height:30 } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
left
|
number
|
0
|
Sets or gets the left property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light",left:100 } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
name
|
string
|
''
|
Sets or gets the name property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light" } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
opacity
|
number
|
0.9
|
Sets or gets the opacity property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light",opacity:0.5 } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
position
|
string
|
'default'
|
Sets or gets the position property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light" } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light",rtl:true } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
showDelay
|
number
|
100
|
Sets or gets the showDelay property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light",showDelay:200 } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
showArrow
|
boolean
|
true
|
Sets or gets the showArrow property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light",showArrow:false } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
top
|
number
|
0
|
Sets or gets the top property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light",top:100 } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
trigger
|
string
|
'hover'
|
Sets or gets the trigger property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light", trigger:"click" } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light" } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
width
|
number
|
'auto'
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:200, position:"mouse", theme:"light" } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
|
|
close
|
Event
|
|
Code examples
Bind to the close event of jqxTooltip.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light" } window.onload = function() { document.querySelector( "jqx-tooltip").addEventListener("close", function(event) { // Your code here. }); }; </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
closing
|
Event
|
|
Code examples
Bind to the closing event of jqxTooltip.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light" } window.onload = function() { document.querySelector( "jqx-tooltip").addEventListener("closing", function(event) { // Your code here. }); }; </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
open
|
Event
|
|
Code examples
Bind to the open event of jqxTooltip.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light" } window.onload = function() { document.querySelector( "jqx-tooltip").addEventListener("open", function(event) { // Your code here. }); }; </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
opening
|
Event
|
|
Code examples
Bind to the opening event of jqxTooltip.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { selector: "container", content:"Tooltip",width:220, position:"mouse", theme:"light" } window.onload = function() { document.querySelector( "jqx-tooltip").addEventListener("opening", function(event) { // Your code here. }); }; </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
|
|
close
|
Method
|
|
| Parameter |
Type |
Description |
| index |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { } window.onload = function() { document.querySelector( "jqx-tooltip").close(); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
destroy
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { } window.onload = function() { document.querySelector( "jqx-tooltip").destroy(); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
open
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { } window.onload = function() { document.querySelector( "jqx-tooltip").open(); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
|
refresh
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tooltip Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript"> JQXElements.settings[ "tooltipSettings"] = { } window.onload = function() { document.querySelector( "jqx-tooltip").refresh(); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Tooltip custom element. </div> <div style="margin-left: 180px; width: 400px;" id="container"> <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" /> </div> <jqx-tool-tip settings="tooltipSettings"></jqx-tool-tip>
|
