javascript - Polymer 中的工具提示被切割到它所在组件的外侧

Question

我制作了一个网络组件“菜单”，它在悬停时有工具提示。但是工具提示在组件外部不可见。正如您在下面看到的，我用字符串“abcdefghijklmnopqrstuvxyz”制作了工具提示。工具提示在组件“内部”可见，而不是在组件“顶部”可见。

我希望它在所有内容之上可见，而不仅仅是我的组件。

如果代码有任何帮助，这里是组件:

<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>

Answer 1

工具提示锚定到父元素；为了解决这个问题，我会移动 paper-tooltip，使 user-menu 元素成为它的父元素。

或者简单地添加属性:

fit-to-visible-bounds="true"

制作:

          <paper-tooltip for="right-menu-logout" position="top" fit-to-visible-bounds="true">abcdefghijklmnopqrstuvxyz</paper-tooltip>