tooltip in Polymer is cut ourtside of the component it is in

I have made a web component "menu" and it has tooltips on hover. But the tooltips are not visible outside the component. As you can see below I've made tooltip with string "abcdefghijklmnopqrstuvxyz". The tooltip is visible "inside" the component and not "on top" of it.

I want it to be visible on top of everything, not only my component.

If the code is any help, here's component:

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-menu/paper-menu.html">
<link rel="import" href="/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="/bower_components/paper-tooltip/paper-tooltip.html">
<link rel="import" href="/bower_components/paper-menu-button/paper-menu-button.html">

<dom-module id="user-menu">
  <template>
    <paper-toolbar>
        <div class="user-photo" style="background-image:url('image.png');"></div>    
      <div id="user-name-div">placeholder1</div> 
      <div class="caption-inv">placeholder2</div>
    </paper-toolbar>
    <paper-menu>
      <paper-icon-item>
        <iron-icon id="right-menu-logout" icon="icons:exit-to-app" item-icon></iron-icon>
          <paper-tooltip for="right-menu-logout" position="top">abcdefghijklmnopqrstuvxyz</paper-tooltip>
          <span>Wyloguj</span>
        </paper-icon-item>
    </paper-menu>
  </template>

  <script>
    Polymer({
      is: "user-menu",
    });
  </script>
</dom-module>