The popovertarget attribute is an HTML attribute used on a control/invoker element (specifically <button> or <input type="button">) to declaratively control the visibility of another element that has the popover attribute set.
Definition and Usage
➔ The value of the popovertarget attribute must be the ID of the popover element that will be invoked.
➔ Clicking on the invoking/control element will toggle the popover element between showing and hiding
➔ 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 popovertarget attribute Example</title>
<style>
.mydiv {
text-align: center;
padding: 30px;
background: rgb(100, 100, 100, 0.4);
}
</style>
</head>
<body>
<h3>HTML popovertarget 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">Click</button>
</body>
</html>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| placeholder | <input>, <textarea> |