OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 6 Code distributed by Google as part of the polymer project is also |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --> |
| 9 |
| 10 <!-- |
| 11 The `core-tooltip` element creates a hover tooltip centered for the content |
| 12 it contains. It can be positioned on the top|bottom|left|right of content using |
| 13 the `position` attribute. |
| 14 |
| 15 To include HTML in the tooltip, include the `tip` attribute on the relevant |
| 16 content. |
| 17 |
| 18 <b>Example</b>: |
| 19 |
| 20 <core-tooltip label="I'm a tooltip"> |
| 21 <span>Hover over me.</span> |
| 22 </core-tooltip> |
| 23 |
| 24 <b>Example</b> - positioning the tooltip to the right: |
| 25 |
| 26 <core-tooltip label="I'm a tooltip to the right" position="right"> |
| 27 <polymer-ui-icon-button icon="drawer"></polymer-ui-icon-button> |
| 28 </core-tooltip> |
| 29 |
| 30 <b>Example</b> - no arrow and showing by default: |
| 31 |
| 32 <core-tooltip label="Tooltip with no arrow and always on" noarrow show> |
| 33 <img src="image.jpg"> |
| 34 </core-tooltip> |
| 35 |
| 36 <b>Example</b> - rich tooltip using the `tip` attribute: |
| 37 |
| 38 <core-tooltip> |
| 39 <div>Example of a rich information tooltip</div> |
| 40 <div tip> |
| 41 <img src="profile.jpg">Foo <b>Bar</b> - <a href="#">@baz</a> |
| 42 </div> |
| 43 </core-tooltip> |
| 44 |
| 45 @group Polymer Core Elements |
| 46 @element core-tooltip |
| 47 @homepage http://polymer.github.io/core-tooltip |
| 48 --> |
| 49 |
| 50 <link rel="import" href="../polymer/polymer.html"> |
| 51 |
| 52 <!-- TODO: would be nice to inherit from label to get .htmlFor, and .control, |
| 53 but the latter is readonly. --> |
| 54 <!-- TODO: support off center arrows. --> |
| 55 <!-- TODO: detect mobile and apply the .large class, instead of manual |
| 56 control. --> |
| 57 <!-- TODO: possibly reuse core-overlay. --> |
| 58 <polymer-element name="core-tooltip" attributes="noarrow position label show" ta
bindex="0" assetpath=""> |
| 59 <template> |
| 60 |
| 61 <link rel="stylesheet" href="core-tooltip.css"> |
| 62 |
| 63 <div id="tooltip" class="polymer-tooltip {{position}} {{ {noarrow: noarrow, sh
ow: show} | tokenList}}"> |
| 64 <content select="[tip]">{{label}}</content> |
| 65 </div> |
| 66 |
| 67 <content></content> |
| 68 |
| 69 </template> |
| 70 |
| 71 </polymer-element> |
| 72 <script src="core-tooltip-extracted.js"></script> |
OLD | NEW |