How to tooltip - fieldenms/tg GitHub Wiki
This is quick instruction with examples about how to add tooltip support for custom component.
Let's one have a component named my-component and one should add tooltip support for it. How to do that?
Below is the prototype of the Polymer component called: my-component:
<link rel="import" href="/resources/polymer/polymer/polymer.html">
<!-- Other html imports goes here. -->
<dom-module id="my-component">
<template>
<style>
/* Styles goes here. */
</style>
<!-- component's template goes here -->
</template>
<script>
Polymer({
is: 'my-component',
/* my-component's prototype goes here. */
</script>
</dom-module>In order to add tooltips one should mixin the TgTooltipBehavior, that is in Polymer.TgBehaviors package, and add tooltip-text attribute to elements those should have tooltips. The value for tooltip-text attribute should contain the text of tooltip. Below is the example of my-component component with added tooltips:
<link rel="import" href="/resources/polymer/polymer/polymer.html">
<link rel="import" href="/resources/components/tg-tooltip-behavior.html">
<link rel="import" href="/resources/polymer/iron-icon/iron-icon.html">
<!-- Other html imports goes here. -->
<dom-module id="my-component">
<template>
<style>
/* Styles goes here. */
</style>
<div id="div_1" tooltip-text="Element's tooltip">Element with tooltip</div>
<div id="div_2" tooltip-text$="[[_getTooltip()]]">Element with calculated tooltip</div>
</template>
<script>
Polymer({
is: 'my-component',
behaviors: [Polymer.TgBehaviors.TgTooltipBehavior],
_getTooltip: function () {
return "<i>Calculated</i> tooltip with icon <iron-icon icon='attachement'></iron-icon>"
}
/* my-component's prototype goes here. */
</script>
</dom-module>The above example has two elements with tooltips. First one, with div_1 id, has simple text without binding and the other one ,with div_2 id, has calculated tooltip that is bind (using $=) to the tooltip-text attribute. Also it is possible to add tooltip to the component itself by specifying tooltip-text attribute value in hostAttributes object of the component. The example below shows how to do that:
<link rel="import" href="/resources/polymer/polymer/polymer.html">
<link rel="import" href="/resources/components/tg-tooltip-behavior.html">
<link rel="import" href="/resources/polymer/iron-icon/iron-icon.html">
<!-- Other html imports goes here. -->
<dom-module id="my-component">
<template>
<style>
/* Styles goes here. */
</style>
<div id="div_1" tooltip-text="Element's tooltip">Element with tooltip</div>
<div id="div_2" tooltip-text$="[[_getTooltip()]]">Element with calculated tooltip</div>
</template>
<script>
Polymer({
is: 'my-component',
behaviors: [Polymer.TgBehaviors.TgTooltipBehavior],
hostAttributes: {
'tooltip-text': "The component's tooltip."
},
_getTooltip: function () {
return "<i>Calculated</i> tooltip with icon <iron-icon icon='attachement'></iron-icon>"
}
/* my-component's prototype goes here. */
</script>
</dom-module>