Javascript CSS内联工具提示

我以前使用过以下代码： 我的问题是如何设置工具提示，使其与父div（而不是上面）一起内联（向右）显示。

谢谢你看了

更易于阅读的JSFIDLE

HTML:

---

在“包装器”工具提示中使底部=20%。 检查你的小提琴。我已经更新了它。 抱歉，如果这不是您想要的

我已经更新了您的

#wrapper #tooltip {
...
    top: -3px;
    left: 100%;
    color: #fff;
    margin-left: 15px;
...

---

并使三角形指向右方向

您的意思是说您希望工具提示正好位于该div的上方吗？对不起，我要澄清一下，我希望工具提示显示在父div的右侧。为了方便起见，请随时使用。我以为你想要它在上面。

#wrapper {
cursor: pointer;
position: fixed;
text-transform: uppercase;
background: #39AC9B;
color: #FFFFFF;
font-family: "Gill Sans", Impact, sans-serif;
font-size: 30px;
top: -webkit-calc(50% - 50px);
left: -webkit-calc(50% - 137px);
padding: 16px 25px;
text-align: center;
width: 250px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

#wrapper #tooltip {
 background: #1496bb;
 bottom: 100%;
color: #fff;
display: block;
left: -25px;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
width: 100%;
-webkit-transform: translateY(10px);
 -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
   -o-transform: translateY(10px);
      transform: translateY(10px);
-webkit-transition: all .25s ease-out;
 -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
      transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
 -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
   -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

#wrapper #tooltip:before {
 bottom: -20px;
 content: " ";
 display: block;
 height: 20px;
 left: 0;
 position: absolute;
 width: 100%;
   }  

#wrapper #tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
 width: 0;
  }

#wrapper:hover #tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
 -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
   -o-transform: translateY(0px);
      transform: translateY(0px);
 }

#wrapper #tooltip {
...
    top: -3px;
    left: 100%;
    color: #fff;
    margin-left: 15px;
...