controllets/room-controllet/room-controllet.html

<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<dom-module id="room-controllet">
    <template>
        <style is="custom-style">
            .room {
                cursor: pointer;
            }
            .room-body {
            }
            .room-subject {
            }
            .room-timestamp {
            }
            .room-tooltip {
                position: absolute;
                border: 2px solid #2196F3;
                background-color: #E0E0E0;
                min-width: 248px;
                top: 0px;
                left: 0px;
            }
        </style>
        <div id={{roomId}} class$="grid-item room {{roomHeight}} {{roomWidth}}" on-mouseover="_showTooltip" on-mouseout="_hideTooltip">
            <div class="room-body"><span>{{body}}</span></div>
            <div class="room-subject"><span>{{subject}}</span></div>
            <div class="room-timestamp">{{timestamp}}</div>
            <paper-dialog id="pippo" class="room-tooltip">
                {{roomId}}
            </paper-dialog>
        </div>
    </template>
    <script>
        Polymer({
            is : 'room-controllet',
            properties : {
                roomId : {
                    type  : Number,
                    value : undefined
                },
                roomColor : {
                    type  : String,
                    value : ""
                },
                roomHeight : {
                    type  : String,
                    value : ""
                },
                roomWidth : {
                    type  : String,
                    value : ""
                },
                body : {
                    type  : String,
                    value : ""
                },
                subject  : {
                    type  : String,
                    value : ""
                },
                timestamp : {
                    type  : String,
                    value : ""
                },
                openData : {
                    type  : Number,
                    value : undefined
                },
                comments : {
                    type  : Number,
                    value : undefined
                }
            },
            attached : function() {
                var room = document.getElementById(this.roomId);
                $(room).css('background', this.roomColor);
            },
            _showTooltip: function() {
                var room = document.getElementById(this.roomId);
                var pos = room.getBoundingClientRect();
                console.log(pos.top);
                console.log(pos.left);
//                $(this.$.pippo).css("top", 1000);
//                $(this.$.pippo).css("left", 100);
//                $("#pippo").css("top", pos.top - 4);
//                $("#pippo").css("left", pos.left - 4);
                this.$.pippo.open();
            },
            _hideTooltip: function() {
                this.$.pippo.close();
                console.log("eeeeeeeeeeeeeeeeee")
            }
        });
    </script>
</dom-module>