paper-tooltip

PolymerElements

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-tooltip/v2.0.0/paper-tooltip/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="demo/test-button.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="paper-tooltip.html">

<custom-style>
  <style is="custom-style" include="demo-pages-shared-styles">
    paper-icon-button,
    input,
    .avatar {
      margin: 0 10px;
    }
    
    .avatar {
      box-sizing: border-box;
      width: 40px;
      height: 40px;
      padding: 8px;
      border-radius: 50%;
      cursor: pointer;
    }
    
    .blue {
      background-color: var(--paper-light-blue-300);
    }
    
    .orange {
      background-color: var(--paper-amber-500);
    }

  </style>
</custom-style>

<h3>Tooltips can be anchored to elements using their ID</h3>

<paper-icon-button id="id_1" icon="favorite" alt="heart"></paper-icon-button>
<paper-icon-button id="id_2" icon="alarm-on" alt="go back"></paper-icon-button>
<div id="id_3" class="avatar blue" tabindex="0"></div>
<div id="id_4" class="avatar orange" tabindex="0"></div>

<!-- paper-icon-buttons have an inherent padding that will push the tooltip down. offset undoes it -->
<paper-tooltip for="id_1" offset="0">&lt;3 &lt;3 &lt;3 </paper-tooltip>
<paper-tooltip for="id_2" offset="0">wake up!</paper-tooltip>
<paper-tooltip for="id_3" offset="0">halp I am trapped in a tooltip</paper-tooltip>
<paper-tooltip for="id_4" offset="0">meow!</paper-tooltip>