recursal/MDN huggingface dataset:
HTMLButtonElement: popoverTargetElement property
================================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`popoverTargetElement`** property of the `HTMLButtonElement` interface gets and sets the popover element to control via a button.

It is the JavaScript equivalent of the `popovertarget` HTML attribute.

Value
-----

A reference to a popover element in the DOM.

Examples
--------

### Toggle popover action with an auto popover

 This example shows the basic use of the popover API, setting a `<div>` element as a popover, and then setting it as the `popoverTargetElement` of a `<button>`.
 The `popover` attribute is set to `"manual"`, so the popover must be closed using a button, and not "light dismissed" by selecting outside the popover area.

 First we define an HTML `<button>` element that we will use to show and hide the popover, and a `<div>` that will be the popover.
 In this case we don't set the `popovertargetaction` HTML attribute on the `<button>` or the `popover` attribute on the `<div>`, as we will be doing so programmatically.


```html
<button id="toggleBtn">Toggle popover</button>
<div id="mypopover">This is popover content!</div>
```


 The JavaScript code first gets a handle to the `<div>` and `<button>` elements.
 It then defines a function to check for popover support.


```js
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

// Check for popover API support.
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}
```


 If the popover API is supported the code sets the `<div>` element's `popover` attribute to `"auto"` and makes it the popover target of the toggle button.
 We then set the `popoverTargetAction` of the `<button>` to `"toggle"`.
 If the popover API is not supported we change the text content of the `<div>` element to state this, and hide the toggle button.


```js
if (supportsPopover()) {
  // Set the <div> element to be an auto popover
  popover.popover = "auto";

  // Set the button popover target to be the popover
  toggleBtn.popoverTargetElement = popover;

  // Set that the button toggles popover visibility
  toggleBtn.popoverTargetAction = "toggle";
} else {
  popover.textContent = "Popover API not supported.";
  toggleBtn.hidden = true;
}
```


**Note:** A popover element is hidden by default, but if the API is not supported your element will display "as usual".

 You can try out the example below.
 Show and hide the popover by toggling the button.
 The "auto" popover can also be dismissed by selecting outside the bounds of the popover text.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-popovertargetelement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Popover API
XRJointPose: radius property
============================

The read-only **`radius`** property of the `XRJointPose` interface indicates the radius (distance from skin) for a joint.

Value
-----

A number indicating the radius in meters.

Examples
--------

### Getting the `radius` for a hand joint

Call `XRFrame.getJointPose()` with an `XRJointSpace` and an `XRReferenceSpace` to get an `XRJointPose` object which provides the radius property.


```js
navigator.xr
  .requestSession({ optionalFeatures: ["hand-tracking"] })
  .then(/\*\* … \*/);

function renderFrame(session, frame) {
  // …

  for (const inputSource of session.inputSources) {
    if (inputSource.hand) {
      const indexFingerTipJoint = inputSource.hand.get("index-finger-tip");
      const radius = frame.getJointPose(
        indexFingerTipJoint,
        referenceSpace,
      ).radius;
    }
  }
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Hand Input Module - Level 1 # dom-xrjointpose-radius |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRHand`
* `XRReferenceSpace`
* `XRJointSpace`
* `XRFrame.getJointPose()`
GPUTextureView: label property
==============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`label`** property of the
 `GPUTextureView` interface provides a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

This can be set by providing a `label` property in the descriptor object passed into the originating `GPUTexture.createView()` call, or you can get and set it directly on the `GPUTextureView` object.

Value
-----

A string. If this has not been previously set as described above, it will be an empty string.

Examples
--------

Setting and getting a label via `GPUTextureView.label`:


```js
// ...

const depthTexture = device.createTexture({
  size: [canvas.width, canvas.height],
  format: "depth24plus",
  usage: GPUTextureUsage.RENDER\_ATTACHMENT,
});

const view = depthTexture.createView();

view.label = "myview";

console.log(view.label); // "myview"
```


Setting a label via the originating `GPUTexture.createView()` call, and then getting it via `GPUTextureView.label`:


```js
// ...

const depthTexture = device.createTexture({
  size: [canvas.width, canvas.height],
  format: "depth24plus",
  usage: GPUTextureUsage.RENDER\_ATTACHMENT,
});

const view = depthTexture.createView({
  label: "myview",
});

console.log(view.label); // "myview"
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpuobjectbase-label |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
CustomEvent: CustomEvent() constructor
======================================

The **`CustomEvent()`** constructor creates a new `CustomEvent` object.

Syntax
------


```js
new CustomEvent(type)
new CustomEvent(type, options)
```

### Parameters

`type`

A string providing the name of the event. Event names are case-sensitive.

`options` Optional

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`detail` Optional

 An event-dependent value associated with the event. This value is then available to the handler using the `CustomEvent.detail` property.
 It defaults to `null`.



### Return value

A new `CustomEvent` object.

Example
-------


```js
// create custom events
const catFound = new CustomEvent("animalfound", {
  detail: {
    name: "cat",
  },
});
const dogFound = new CustomEvent("animalfound", {
  detail: {
    name: "dog",
  },
});

// add an appropriate event listener
obj.addEventListener("animalfound", (e) => console.log(e.detail.name));

// dispatch the events
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);

// "cat" and "dog" logged in the console
```


Additional examples can be found at Creating and triggering events.

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-customevent-customevent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `CustomEvent`
* Creating and triggering events
CustomEvent: detail property
============================

 The read-only **`detail`** property of the `CustomEvent` interface
 returns any data passed when initializing the event.

Value
-----

Whatever data the event was initialized with.

Example
-------


```js
// create custom events
const catFound = new CustomEvent("animalfound", {
  detail: {
    name: "cat",
  },
});
const dogFound = new CustomEvent("animalfound", {
  detail: {
    name: "dog",
  },
});

// add an appropriate event listener
obj.addEventListener("animalfound", (e) => console.log(e.detail.name));

// dispatch the events
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);

// "cat" and "dog" logged in the console
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-customevent-detail② |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `CustomEvent`
CustomEvent: initCustomEvent() method
=====================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 The **`CustomEvent.initCustomEvent()`** method initializes a `CustomEvent` object.
 If the event has already been dispatched, this method does nothing.

 Events initialized in this way must have been created with the `Document.createEvent()` method.
 This method must be called to set the event before it is dispatched using `EventTarget.dispatchEvent()`.
 Once dispatched, it doesn't do anything anymore.

**Note:** **Do not use this method anymore, as it is deprecated.**

 Rather than using the feature, instead use specific event constructors, like `CustomEvent()`.
 The page on Creating and triggering events gives more information about the way to use those.


Syntax
------


```js
event.initCustomEvent(type, canBubble, cancelable, detail)
```

### Parameters

`type`

A string containing the name of the event.

`canBubble`

 A boolean value indicating whether the event bubbles up through the DOM
 or not.


`cancelable`

A boolean value indicating whether the event is cancelable.

`detail`

Any data that will be available to the handler through the `CustomEvent.detail` property.

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-customevent-initcustomevent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `CustomEvent`
* The constructor to use instead of this deprecated method: `CustomEvent()`.
PerformanceMeasure: detail property
===================================

The read-only **`detail`** property returns arbitrary metadata that was included in the mark upon construction (when using `performance.measure()`.

Value
-----

Returns the value it was set to (from `markOptions` of `performance.measure()`).

Examples
--------

The following example demonstrates the `detail` property.


```js
performance.measure("dog", { detail: "labrador", start: 0, end: 12345 });

const dogEntries = performance.getEntriesByName("dog");

dogEntries[0].detail; // labrador
```

Specifications
--------------

| Specification |
| --- |
| User Timing # dom-performancemeasure-detail |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PannerNode: setOrientation() method
===================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Note:** The suggested replacement for this deprecated method is to instead set the `orientationX`, `orientationY`, and `orientationZ` attributes directly.

The `setOrientation()` method of the `PannerNode` Interface defines the direction the audio source is playing in.

This can have a big effect if the sound is very directional — controlled by the three cone-related attributes `PannerNode.coneInnerAngle`, `PannerNode.coneOuterAngle`, and `PannerNode.coneOuterGain`. In such a case, a sound pointing away from the listener can be very quiet or even silent.

The three parameters `x`, `y` and `z` are unitless and describe a direction vector in 3D space using the right-hand Cartesian coordinate system. The default value of the direction vector is `(1, 0, 0)`.

Syntax
------


```js
setOrientation(x, y, z)
```

### Parameters

`x`

The x value of the panner's direction vector in 3D space.

`y`

The y value of the panner's direction vector in 3D space.

`z`

The z value of the panner's direction vector in 3D space.

### Return value

None (`undefined`).

Examples
--------

See `BaseAudioContext.createPanner()` for example code.

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-pannernode-setorientation |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the Web Audio API
PannerNode: coneInnerAngle property
===================================

The `coneInnerAngle` property of the `PannerNode` interface is a double value describing the angle, in degrees, of a cone inside of which there will be no volume reduction.

The `coneInnerAngle` property's default value is `360`, suitable for a non-directional source.

Value
-----

A double.

Examples
--------

See `PannerNode.orientationX` for example code that demonstrates the effect on volume of changing the `PannerNode` orientation parameters in combination with `coneInnerAngle` and `coneOuterAngle`.

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-pannernode-coneinnerangle |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the Web Audio API
* Web Audio spatialization basics
PannerNode: coneOuterGain property
==================================

The `coneOuterGain` property of the `PannerNode` interface is a double value, describing the amount of volume reduction outside the cone, defined by the `coneOuterAngle` attribute.

The `coneOuterGain` property's default value is `0`, meaning that no sound can be heard outside the cone.

Value
-----

A double. The default is `0`, and its value can be in the range 0–1.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the property has been given a value outside the accepted range (0–1).

Examples
--------

See `PannerNode.orientationX` for example code that demonstrates how changing the `PannerNode` orientation parameters in combination with `coneInnerAngle` and `coneOuterAngle` affects volume.

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-pannernode-coneoutergain |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the Web Audio API
* Web Audio spatialization basics
PannerNode: positionY property
==============================

 The **`positionY`** property of the `PannerNode` interface specifies the Y coordinate of the audio source's position in 3D Cartesian
 coordinates, corresponding to the *vertical* axis (top-bottom). The complete
 vector is defined by the position of the audio source, given as
 (`positionX`, `positionY`, `positionZ`), and the orientation
 of the audio source (that is, the direction in which it's facing), given as
 (`orientationX`,
 `orientationY`,
 `orientationZ`).

 Depending on the directionality of the sound (as specified using the attributes
 `coneInnerAngle`,
 `coneOuterAngle`, and
 `codeOuterGain`), the orientation of the
 sound may alter the perceived volume of the sound as it's being played. If the sound
 is pointing toward the listener, it will be louder than if the sound is pointed away
 from the listener.

 The `AudioParam` contained by this property is read only; however, you
 can still change the value of the parameter by assigning a new value to its
 `AudioParam.value` property.

Value
-----

 An `AudioParam` whose `value` is the Y coordinate of the audio
 source's position, in 3D Cartesian coordinates.

Examples
--------

 The following example starts an oscillator and pans it above the listener after 1
 second, below the listener after 2 seconds, and back to the center after 3 seconds. Note
 that in this case, the change will mainly affect the timbre of the oscillator, as it's a
 simple mono wave.


```js
const context = new AudioContext();

const osc = new OscillatorNode(context);
const panner = new PannerNode(context);
panner.panningModel = "HRTF";

panner.positionY.setValueAtTime(1, context.currentTime + 1);
panner.positionY.setValueAtTime(-1, context.currentTime + 2);
panner.positionY.setValueAtTime(0, context.currentTime + 3);

osc.connect(panner).connect(context.destination);

osc.start(0);
```

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-pannernode-positiony |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the Web Audio API
* Web Audio spatialization basics
* `PannerNode`
PannerNode: rolloffFactor property
==================================

The `rolloffFactor` property of the `PannerNode` interface is a double value describing how quickly the volume is reduced as the source moves away from the listener. This value is used by all distance models. The `rolloffFactor` property's default value is `1`.

Value
-----

A number whose range depends on the `distanceModel` of the panner as follows (negative values are not allowed):

"`linear`"

The range is 0 to 1.

"`inverse`"

The range is 0 to `Infinity`.

"`exponential`"

The range is 0 to `Infinity`.

### Exceptions

`RangeError`

Thrown if the property has been given a value that is outside the accepted range.

Examples
--------

This example demonstrates how different `rolloffFactor` values affect how the volume of the test tone decreases with increasing distance from the listener:


```js
const context = new AudioContext();
// all our test tones will last this many seconds
const NOTE\_LENGTH = 4;
// this is how far we'll move the sound
const Z\_DISTANCE = 20;

// this function creates a graph for the test tone with a given rolloffFactor
// and schedules it to move away from the listener along the Z (depth-wise) axis
// at the given start time, resulting in a decrease in volume (decay)
const scheduleTestTone = (rolloffFactor, startTime) => {
  const osc = new OscillatorNode(context);

  const panner = new PannerNode(context);
  panner.rolloffFactor = rolloffFactor;

  // set the initial Z position, then schedule the ramp
  panner.positionZ.setValueAtTime(0, startTime);
  panner.positionZ.linearRampToValueAtTime(Z\_DISTANCE, startTime + NOTE\_LENGTH);

  osc.connect(panner).connect(context.destination);

  osc.start(startTime);
  osc.stop(startTime + NOTE\_LENGTH);
};

// this tone should decay fairly quickly
scheduleTestTone(1, context.currentTime);
// this tone should decay slower than the previous one
scheduleTestTone(0.5, context.currentTime + NOTE\_LENGTH);
// this tone should decay only slightly
scheduleTestTone(0.1, context.currentTime + NOTE\_LENGTH \* 2);
```


After running this code, the resulting waveforms should look something like this:

![A waveform visualization of three oscillator tones produced in Web Audio. Each oscillator moves away from the listener at the same speed, but with different rolloffFactors affecting the resulting volume decay.](/en-US/docs/Web/API/PannerNode/rolloffFactor/screen_shot_2018-10-11_at_23.22.37.png)

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-pannernode-rollofffactor |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the Web Audio API
* Web Audio spatialization basics
PannerNode: orientationZ property
=================================

 The **`orientationZ`** property of the `PannerNode` interface
 indicates the Z (depth) component of the direction the audio source is facing, in 3D Cartesian coordinate space.

 The complete vector is defined by the position of the audio source, given as
 (`positionX`, `positionY`, `positionZ`), and the orientation
 of the audio source (that is, the direction in which it's facing), given as
 (`orientationX`,
 `orientationY`,
 `orientationZ`).

 Depending on the directionality of the sound (as specified using the attributes
 `coneInnerAngle`,
 `coneOuterAngle`, and
 `codeOuterGain`), the orientation of the
 sound may alter the perceived volume of the sound as it's being played. If the sound
 is pointing toward the listener, it will be louder than if the sound is pointed away
 from the listener.

 The `AudioParam` contained by this property is read only; however, you
 can still change the value of the parameter by assigning a new value to its
 `AudioParam.value` property.

Value
-----

 An `AudioParam` whose `value` is the Z component of the
 direction the audio source is facing, in 3D Cartesian coordinate space.

Example
-------

See `PannerNode.orientationX` for example code that demonstrates the effect on volume of changing the `PannerNode` orientation parameters in combination with `coneInnerAngle` and `coneOuterAngle`.

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-pannernode-orientationz |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the Web Audio API
* Web Audio spatialization basics
* `PannerNode`