third_party/polymer/v1_0/components-chromium/paper-tooltip/paper-tooltip.html - Issue 2013323002: MD Settings: add <paper-tooltip> to show controlled indicators

Unified Diff: third_party/polymer/v1_0/components-chromium/paper-tooltip/paper-tooltip.html

Issue 2013323002: MD Settings: add <paper-tooltip> to show controlled indicators (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-tooltip/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/paper-tooltip/paper-tooltip-extracted.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v1_0/components-chromium/paper-tooltip/paper-tooltip.html

diff --git a/third_party/polymer/v1_0/components-chromium/paper-tooltip/paper-tooltip.html b/third_party/polymer/v1_0/components-chromium/paper-tooltip/paper-tooltip.html

new file mode 100644

index 0000000000000000000000000000000000000000..2e885fe4631b39fd5d339eede09b3a7ee73cf3c2

--- /dev/null

+++ b/third_party/polymer/v1_0/components-chromium/paper-tooltip/paper-tooltip.html

@@ -0,0 +1,99 @@

+<!--

+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt

+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt

+Code distributed by Google as part of the polymer project is also

+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt

+--><html><head><link rel="import" href="../polymer/polymer.html">

+<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">

+<link rel="import" href="../neon-animation/animations/fade-in-animation.html">

+<link rel="import" href="../neon-animation/animations/fade-out-animation.html">

+<!--

+Material design: [Tooltips](https://www.google.com/design/spec/components/tooltips.html)

+`<paper-tooltip>` is a label that appears on hover and focus when the user

+hovers over an element with the cursor or with the keyboard. It will be centered

+to an anchor element specified in the `for` attribute, or, if that doesn't exist,

+centered to the parent node containing it.

+Example:

+ <div style="display:inline-block">

+ <button>Click me!</button>

+ <paper-tooltip>Tooltip text</paper-tooltip>

+ </div>

+ <div>

+ <button id="btn">Click me!</button>

+ <paper-tooltip for="btn">Tooltip text</paper-tooltip>

+ </div>

+The tooltip can be positioned on the top|bottom|left|right of the anchor using

+the `position` attribute. The default position is bottom.

+ <paper-tooltip for="btn" position="left">Tooltip text</paper-tooltip>

+ <paper-tooltip for="btn" position="top">Tooltip text</paper-tooltip>

+### Styling

+The following custom properties and mixins are available for styling:

+Custom property | Description | Default

+----------------|-------------|----------

+`--paper-tooltip-background` | The background color of the tooltip | `#616161`

+`--paper-tooltip-opacity` | The opacity of the tooltip | `0.9`

+`--paper-tooltip-text-color` | The text color of the tooltip | `white`

+`--paper-tooltip` | Mixin applied to the tooltip | `{}`

+@group Paper Elements

+@element paper-tooltip

+@demo demo/index.html

+-->

+</head><body><dom-module id="paper-tooltip">

+ <template>

+ <style>

+ :host {

+ display: block;

+ position: absolute;

+ outline: none;

+ z-index: 1002;

+ -moz-user-select: none;

+ -ms-user-select: none;

+ -webkit-user-select: none;

+ user-select: none;

+ cursor: default;

+ }

+ #tooltip {

+ display: block;

+ outline: none;

+ @apply(--paper-font-common-base);

+ font-size: 10px;

+ line-height: 1;

+ background-color: var(--paper-tooltip-background, #616161);

+ opacity: var(--paper-tooltip-opacity, 0.9);

+ color: var(--paper-tooltip-text-color, white);

+ padding: 8px;

+ border-radius: 2px;

+ @apply(--paper-tooltip);

+ }

+ /* Thanks IE 10. */

+ .hidden {

+ display: none !important;

+ }

+ </style>

+ <div id="tooltip" class="hidden">

+ <content></content>

+ </div>

+ </template>

+ </dom-module>

+<script src="paper-tooltip-extracted.js"></script></body></html>