The popovertargetaction HTML attribute specifies the action performed by its control button on a popover element.
Definition and Usage
➔ Clicking on the invoking/control element will toggle the popover element between showing and hiding.
➔ A popover element will remain invisible until it is invoked by another element (i.e., a <button> or <input type="button">).
➔ popovertargetaction accepts the following values:
- "show": The button will show a hidden popover. If the popover is already displayed, no action is taken.
- "hide": The button will hide a displayed popover. If the popover is already hidden, no action will be taken.
- "toggle": This is the default value if the popovertargetaction attribute is not specified. This toggles the visibility of the popover. It shows it if hidden, and hides it if shown.
➔ The popover element can be a single HTML element, or an element with a combination of HTML elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML popovertargetaction attribute Example</title>
<style>
.mydiv {
text-align: center;
padding: 30px;
background: rgb(100, 100, 100, 0.4);
}
button,
input[type="button"] {
padding: 5px;
margin: 5px;
borde-radius: 5px;
width: 120px;
height: 50px;
}
</style>
</head>
<body>
<h3>HTML popovertargetaction attribute Example</h3>
<p>Click the button to toggle between show and hide popever elements.</p>
<div popover id="sample" class="mydiv">
<h1>This is a popover element.</h1>
<p>The value of the popovertarget attribute must be the ID of the popover element</p>
</div>
<button popovertarget="sample" popovertargetaction="show">Show Popover</button>
<input type="button" popovertarget="sample" popovertargetaction="toggle" value="Toggle Popover">
</body>
</html>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| placeholder | <input>, <textarea> |