Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<meta charset="utf-8">
<medddta name="viewport" content="width=device-width, initial-scale=1" />
​
<!-- Hosted at https://jsbin.com/cosusih/edit?html,output -->
​
<h1 id=support></h1>
​
<div id="hovergroup">
  <div class=example>
    <button interesttarget=hoverpopover1 popovertarget=clickpopover1>
      Hover me or click me (popover 1)
    </button>
    <div popover=hint id=hoverpopover1>
      Hover-triggered popover
    </div>
    <div popover=auto id=clickpopover1>
      Click-triggered popover
    </div>
  </div>
​
  <div class=example>
    <button interesttarget=hoverpopover2 popovertarget=clickpopover2>
      Hover me or click me (popover 2)
    </button>
    <div popover=hint id=hoverpopover2>
      Hover-triggered popover
    </div>
    <div popover=auto id=clickpopover2>
      Click-triggered popover
    </div>
  </div>
​
  <div class=example>
    <button class="interesttarget fast" interesttarget=hoverpopover3 popovertarget=clickpopover3>
      Hover me or click me (popover 3, fast delays)
    </button>
    <div popover=hint id=hoverpopover3>
      Hover-triggered popover
    </div>
    <div popover=auto id=clickpopover3>
      Click-triggered popover
    </div>
  </div>
​
  <div class=example>
    <label for=labelbutton>Label for button (should be hoverable also)</label>
    <button id=labelbutton interesttarget=hoverpopover4 popovertarget=clickpopover4>
      Hover me or hover my label
    </button>
    <div popover=hint id=hoverpopover4>
      Hover-triggered popover
    </div>
    <div popover=auto id=clickpopover4>
      Click-triggered popover
    </div>
  </div>
​
  <div class=example>
    <a href="#" class="interesttarget" interesttarget=hoverpopover5>Hover me (link)</a>
    <div popover=hint id=hoverpopover5>
      Hover-triggered popover
    </div>
  </div>
</div>
​
<style>
/* Interesttarget related stuff */
[interesttarget] {
  interest-target-delay: 1s;
}
.fast {
  interest-target-show-delay: 0.2s;
  interest-target-hide-delay: 0.1s;
}
/* Make show delays zero when there's already something with interest */
/* Yes, it likely makes sense to rename :has-interest to :interest */
#hovergroup:has(:has-interest) [interesttarget] {
  interest-target-show-delay: 0s;
}
:has-interest {
  background-color: lightgreen;
}
[popover=auto] {
  /* Anchor relationship is automatically set up */
  position-area: bottom span-right;
  background: #cfc;
}
[popover=hint] {
  position-area: bottom right;
  background: #ffc;
}
​
​
​
/* General styling */
button {
  display:block;
  border: 1px solid black;
  border-radius: 4px;
  padding: 4px 8px;
}
button:hover, label:hover {
  background-color: lightgray;
}
[popover] {
  inset:auto;
  margin:0;
  padding: 8px;
  border: 1px solid gray;
  border-radius: 5px;
}
.example {
  margin: 20px 0;
}
</style>
​
<script>
  support.textContent = HTMLButtonElement.prototype.hasOwnProperty("interestTargetElement") ? '' :
    'The interesttarget attribute is **not** supported by this browser!';
</script>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mfreed7pro
0viewers