1

I was trying to popup the bubble text, for that I have codded below, the code when the mouse over the help anchor tag that bubble text should be popup, but it is not working for me please help me on the same.

Here is my code snippet.

**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;
}
Bobby
  • 73
  • 2
  • 8

0 Answers0