src/third_party/polymer/components/core-tooltip/demo.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4
   5   <meta charset="utf-8">
   6   <title>Core Tooltip</title>
   7
   8   <script src="../platform/platform.js"></script>
   9
  10   <link rel="import" href="core-tooltip.html">
  11
  12   <style>
  13     body {
  14       font-family: "Open Sans", sans-serif;
  15       font-weight: 300;
  16       padding: 24px;
  17     }
  18
  19     section {
  20       display: flex;
  21       justify-content: center;
  22       align-items: center;
  23     }
  24
  25     .example {
  26       margin: 35px 15px;
  27     }
  28
  29     .example > * {
  30       margin: 0 15px;
  31     }
  32
  33     .fakebutton {
  34       box-shadow: 0 0 3px #aaa inset;
  35       border-radius: 3px;
  36       padding: 7px 5px;
  37     }
  38     .fakebutton:hover {
  39       background-color: white;
  40     }
  41
  42     img {
  43       width: 400px;
  44       height: 150px;
  45       object-fit: cover;
  46     }
  47
  48     img.large {
  49       border: 15px solid white;
  50       box-sizing: border-box;
  51     }
  52
  53     .profile {
  54       width: 60px;
  55       height: auto;
  56       border-radius: 50%;
  57       vertical-align: middle;
  58     }
  59
  60     a {
  61       color: currentcolor;
  62       text-decoration: none;
  63     }
  64
  65     .rich {
  66       background: hotpink;
  67       color: white;
  68       padding:20px;
  69       border-radius: 5px;
  70     }
  71
  72     core-tooltip.fancy::shadow .polymer-tooltip {
  73       opacity: 0;
  74       -webkit-transition: all 300ms cubic-bezier(0,1.92,.99,1.07);
  75       transition: all 300ms cubic-bezier(0,1.92,.99,1.07);
  76       -webkit-transform: translate3d(0, -10px, 0);
  77       transform: translate3d(0, -10px, 0);
  78     }
  79
  80     core-tooltip.fancy:hover::shadow .polymer-tooltip,
  81     core-tooltip.fancy:focus::shadow .polymer-tooltip {
  82       opacity: 1;
  83       -webkit-transform: translate3d(0, 0, 0);
  84       transform: translate3d(0, 0, 0);
  85     }
  86   </style>
  87   <style shim-shadowdom2>
  88     .on /deep/ .polymer-tooltip {
  89       visibility: visible;
  90     }
  91   </style>
  92
  93 </head>
  94 <body unresolved>
  95
  96   <article onclick="this.classList.toggle('on');">
  97
  98     <em>click the page to toggle all examples...</em>
  99
 100       <section class="small">
 101
 102         <div class="example">
 103
 104           <core-tooltip label='position="left"' position="left">
 105             <div class="fakebutton">|||</div>
 106           </core-tooltip>
 107
 108           <core-tooltip label='position="top"' position="top">
 109             <div class="fakebutton">|||</div>
 110           </core-tooltip>
 111
 112           <core-tooltip label='position="bottom"' position="bottom">
 113             <div class="fakebutton">|||</div>
 114           </core-tooltip>
 115
 116           <core-tooltip label='position="right"' position="right">
 117             <div class="fakebutton">|||</div>
 118           </core-tooltip>
 119
 120         </div>
 121
 122         <div class="example">
 123
 124           <core-tooltip label="Fancy effect" class="fancy">
 125             <img src="https://pbs.twimg.com/profile_images/378800000548263523/c110b0a4c3e3e4d3dcce1d2020f3eded.jpeg
 126         " class="profile">
 127           </core-tooltip>
 128
 129         </div>
 130
 131       </section>
 132
 133       <section>
 134
 135         <div class="example">
 136
 137           <core-tooltip>
 138             <div class="rich">Rich tooltip with HTML</div>
 139             <div tip>
 140               <img src="https://pbs.twimg.com/profile_images/378800000548263523/c110b0a4c3e3e4d3dcce1d2020f3eded.jpeg
 141         " class="profile" style="width: 40px;margin-right: 8px;">Eric <b>Bidelman</b> - <a href="#">@ebidel</a></div>
 142           </core-tooltip>
 143
 144         </div>
 145
 146         <div class="example">
 147
 148           <core-tooltip label="<core-tooltip large>" large>
 149             Larger tooltips for mobile
 150           </core-tooltip>
 151
 152         </div>
 153
 154       </section>
 155
 156       <section>
 157
 158         <div class="example">
 159
 160           <core-tooltip label="Tooltip with no arrow and always on: <core-tooltip noarrow show>" position="bottom" noarrow show>
 161             <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/building.jpg" class="large">
 162           </core-tooltip>
 163
 164         </div>
 165
 166       </section>
 167
 168   </article>
 169
 170 </body>
 171 </html>