bubble-popup - アンカータグのマウスオーバーでバブルテキストが表示されない

Question

私はバブル テキストをポップアップしようとしていました。そのため、バブル テキストがポップアップするはずのヘルプ アンカー タグの上にマウスを置いたときのコードを以下にコードしましたが、うまくいきません。同じことを手伝ってください。

これが私のコードスニペットです。

**HTML Code:**

<div class="divbubble"> <div class="tooltip">
                                    <a href="#">Help</a>
                                    <div>
                                        <div class="top"></div>
                                        <div>
                                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                        </div>
                                        <div class="bottom"></div>
                                    </div>
                                </div></div>

**CSS code:**

.divbubble .tooltip {
  width: 18px;
  height: 18px;
  position: relative;
  margin-left: 15px;
  float: left;
}
.divbubble .tooltip a {
  display: block;
  float: left;
  width: 18px;
  height: 18px;
  background: url(images/icoQuestion.png) no-repeat;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}
.divbubble .tooltip a:hover {
  background-position: 0 -18px;
}
.divbubble .tooltip > div {
  display: none;
  position: absolute;
  float: left;
  width: 220px;
  bottom: 22px;
  left: -101px;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  z-index: 20;
}
.divbubble .tooltip > div .top {
  background: url(images/tooltipTop.png) no-repeat;
  width: 220px;
  height: 10px;
}
.divbubble .tooltip > div div {
  display: block;
  background: #4599c3;
  width: 200px;
  padding: 0 10px;
}
.divbubble .tooltip > div .bottom {
  background: url(images/tooltipBottom.png) no-repeat;
  width: 220px;
  height: 21px;
}