Skip to content
A Polymer popover component empowered by Popper.js
HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
images
test
.gitignore
README.md
bower.json
index.html
polymer-popover.html
polymer.json
popperjs-import.html

README.md

<polymer-popover>

GitHub version Published on webcomponents.org

Preview

An easy to use and run-time configurable popover component based on Polymer 2.0.

image broken

Install

  1. Install bower dependency

    bower install polymer-popover --save

  2. Import polymer-popover component into your project

    <link rel="import" href="YOUR_PATH/bower_components/polymer-popover/polymer-popover.html>"

Usage

Quick Start

Specify for, placement, content and make sure your target element is inside body tag of the document. For more examples, please check out the demo in the demo folder.

Inline Demo

Check out this inline demo on webcomponents

<div class="container">
  <div id="target" onclick="changeVisibility()">
      Click Me!
  </div>
</div>
<polymer-popover for="target" placement="top" header="this is the popover header" content="This is the popover content" type="danger">
</polymer-popover>
<polymer-popover for="target" placement="left" header="this is the popover header" content="This is the popover content" type="primary">
</polymer-popover>
<style>
  .container {
    overflow: scroll;
    width: 1000px;
    padding-left: 300px;
    padding-top: 200px;
    padding-bottom: 500px;
  }
  #target {
    width: 100px;
    height: 70px;
    background-color: white; 
    color: black; 
    border: 2px solid #337ab7;
    border-radius: 4px;
    text-align: center;
    line-height: 70px;
    cursor: pointer;
  }
  #target:hover {
    background-color: #337ab7;
    color: white;
  }
</style>
<script>
    function changeVisibility(hidden) {
      const popovers = document.querySelectorAll(`[for=target]`);
      popovers.forEach(
        (popover) => { popover.hidden = !popover.hidden; });
    }
</script>

Properties

Prop Name Description Type Example Default Reactive
for the attached target element id string 'reference' - true
placement the initial placement of popover string 'top', 'right', 'bottom', 'left' 'bottom' true
content the content of popover string 'popover content' - true
header the header of popover string 'popover header' - true
offset the offset of popover string '10, 10', '10%, 10', '10%, 10%' '0, 0' true
z-index the z-index of popover number 1000 999 true
type the type of popover header string 'default', 'danger', 'warning', 'info', 'success', 'primary' 'default' true
custom if true the content will be omitted, slot will be enabled boolean false false false
hidden if true the popover will be invisible boolean false false true

Slots

Slot Name Description
custom-content customized html content when custom is true

License

MIT

You can’t perform that action at this time.