How to add HTML <input> popovertargetaction Attribute
When the input button is clicked, the popover element will show.
Definition and Usage
The popovertargetaction attribute allows you to define what happens when you click the button.
You can choose between the values "show", "hide", and "toggle".
The popovertargetaction only works when type="button".
If the popovertargetaction attribute is not specified, the default "toggle" value will be used.
Browser Support
Syntax
<input type="button" popovertarget="element_id popovertargetaction="hide|show|toggle"">
Attribute Values
| Value | Description | |
|---|---|---|
| hide | The popover element is hidden when you click the button |
| show | The popover element is showed when you click the button | |
| toggle | Default value. The popover element is toggled between hidding and showing when you click the button |
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The input popovertargetaction Attribute</h1>
<h1 popover id="myheader">Hello</h1>
<input type="button" popovertarget="myheader" popovertargetaction="show" value="Show popover">
<p>Click the button and it will show the popover element.</p>
</body>
</html>
Output should be:
Type: | Html |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded by: | Admin |