工具尖端被桌边切断

Question

我正在尝试在数据表中使用工具提示，但无论何时出现，它都会被表的边缘切断。我尝试了所有不同类型的CSS，但没有任何结果。我可以实现一些css或javascript来实现这一点吗？

以下是位置索引中的工具提示代码：

<div class="tooltip-item">
                <div class="actions">
                  <%= link_to "#{location.name}", location %>
                </div>
                <div class="tooltip">
                  <div class="tooltip-content">
                    LR System ID: <%= "#{@post.lr_system_id}" %>
                    <br>
                    LR Version:   <%= "#{@post.lr_version}" %>
                  </div>
                </div>

locations.scss：

.tooltip-item {
  text-align: center;
  margin-top: 10px;
  }

intro {
  @include outer-container;
  p { @include span-columns(3); }
  //article { @include span-columns(9); }
}

#content {
 p {
  font-family: Lato, sans-serif;
   }
 }

table {

  a:link{color:#000;}
  a:visited{color:#000;}
  a:hover{color:#959A8B;}

  th {
    width: 9%; // 100% / 11 (num columns) ≈ 9%
  }
  td {
    width: 9%;
  }

  border-width: medium;
  border-style: solid;
  border-color: $bar-border-color
}

table {font-size: 14px;}

tooltip.scss：

.tooltip-item {
  display: inline-block;
  position: relative;
  text-align: center;

  &:focus .tooltip,
  &:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip {
    @include position(absolute, null 0 3em);
    @include transition(all 0.2s ease-in-out);
    background-color: #f8f8f8;
    margin-left: -3.7em;
    opacity: 0;
    text-align: center;
    visibility: hidden;
    width: 12em;

    border-radius: 15px;
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: #D7D7D7;
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: #E7E7E7;

  }

.tooltip::after {
    @include position(absolute, null 0 null);
    bottom: -1em;
    color: #f8f8f8;
    content: "▼";
    font-size: 1.4em;
    text-align: center;
  }

.tooltip-content {
    z-index: 9999;
    margin-bottom: 0;
  }
}