Commit 11a53837 authored by Magdalena Turska's avatar Magdalena Turska

backport of pb-popover from LitElement to Polymer

parent 37e39364
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"/>
<title>Pb-popover Demo</title>
<script src="../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="../dependencies-dev.html"/>
<style is="custom-style" include="demo-pages-shared-styles">
main {
display: flex;
justify-content: space-between;
<p><pb-popover>Lorem<span slot="content">tooltip popover</span></pb-popover> ipsum dolor sit amet,
consetetur <pb-popover persistent>sadipscing<span slot="content">persistent dialog popover</span></pb-popover> elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
......@@ -79,6 +79,7 @@
<link rel="import" href="pb-zoom.html">
<link rel="import" href="pb-view-type.html">
<link rel="import" href="pb-edit-xml.html">
<link rel="import" href="pb-popover.html">
<link rel="import" href="pb-progress.html">
<link rel="import" href="pb-load.html">
<link rel="import" href="pb-download.html">
<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="pb-mixin.html">
<dom-module id="pb-popover">
:host {
display: inline-block;
<a href="#" id="link" on-click="_open"><slot></slot></a>
<template is="dom-if" if="[[_isPersistent()]]">
<paper-dialog id="dialog" dynamic-align no-overlap horizontal-align="left" vertical-align="top">
<h2><slot name="title"></slot></h2>
<slot name="content"></slot>
<div class="buttons">
<paper-button dialog-confirm="dialog-confirm" autofocus="autofocus">
<template is="dom-if" if="[[!_isPersistent()]]">
<paper-tooltip for="link" position="bottom" fit-to-visible-bounds="fit-to-visible-bounds">
<slot name="content"></slot>
* `pb-popover`
* @customElement
* @polymer
* @demo demo/pb-popover.html
* @appliesMixin PbMixin
class PbPopover extends PbMixin(Polymer.Element) {
static get is() {
return 'pb-popover';
static get properties() {
return {
type: Boolean
connectedCallback() {
// this.persistent = false;
_isPersistent() {
return this.persistent;
_open(ev) {
if (this.persistent) {
const dialog = this.shadowRoot.getElementById('dialog');
dialog.positionTarget = this.shadowRoot.getElementById('link');;
window.customElements.define(, PbPopover);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment