在悬停时将div从页面中抬出而不会打扰其他div

Question

我试图通过使用现有的标签来实现类似工具提示。

我有标签（以材料设计芯片的形式），当悬停时应显示所有可能的截断文本（如果它适合屏幕）。并且不会打扰其他div。

[本文适合] [本文不是......] [你好]

在悬停时应该看起来像这样：

[此文字适合] [此文字不适合] llo]

请记住标签有背景颜色，所以只是让它溢出不会。

我的想法是将芯片位置设置为绝对值，然后在芯片宽度上添加一个不可见的前置元素。但是，我无法在css中使用它。

HTML：

<div id="items">
  <div class="chip">this text is to long to fit</div>
  <div class="chip">this text is to long to fit</div>
  <div class="chip">this text is to long to fit</div>
  <div class="chip">this text is to long to fit</div>
  <div class="chip">this text is to long to fit</div>
  <div class="chip">this text is to long to fit</div>
  <div class="chip">this text is to long to fit</div>
  <div class="chip">this text is to long to fit</div>
  <div class="chip">this text is to long to fit</div>
  <div class="chip">this text is to long to fit</div>
</div>

的CSS：

.chip {
  display: inline-block;
  height: 32px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  line-height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  background-color: #e4e4e4;
  margin-bottom: 5px;
  margin-right: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50px;
}

.chip:hover {
  position: absolute;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  max-width: 100%;
}

.chip:hover:before {
  content: "";
  position: relative;
  width: 50px;
}

这是我的小提琴：

http://jsfiddle.net/heYgb/3/

我的问题：

如何在不打扰兄弟姐妹的情况下使用div本身实现像悬停效果这样的工具提示？

修改

也许工具提示在这里不是正确的词。因为我想实际上只是提升＆＃34;现有的div并将其扩展到完整大小而不移动其他div（如此重叠）。