How to tooltip

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>