如何在DIV的左侧显示工具提示

Question

您好我已经从Google下载了一些代码，以获取我的某个DIV的工具提示。

在这里，工具提示显示在DIV的顶部，我想要的是显示工具

在DIV的左侧倾斜并且应该有一个很长的高度。

我是CSS的初学者我尽我所能但我无法找到解决方案。

请查看JSFIDDLE Link

CSS代码

.wrapper {
  text-transform: uppercase;
  background: #ececec;
  color: #555;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 20px;
  padding: 15px 20px;
  position: relative;
  width: 200px;
  -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);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.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);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
  display: none;
}

.lte8 .wrapper:hover .tooltip {
  display: block;
}

---

HTML代码

<br /><br /><br /><br /><br /><br /><br /><br />
  <div class="wrapper">
      <div class="tooltip">Here is the massage to be shown to the user Here is the massage to be shown to the user</div>
  </div>
</div>

Answer 1

如果我理解正确，这就是你需要的：

http://jsfiddle.net/n6scfd6n/

    .wrapper {
    text-transform: uppercase;
    background: #ececec;
    color: #555;
    cursor: help;
    font-family:"Gill Sans", Impact, sans-serif;
    font-size: 20px;
    padding: 15px 20px;
    position: relative;
    width: 200px;
    -webkit-transform: translateZ(0);
    /* webkit flicker fix */
    -webkit-font-smoothing: antialiased;
    /* webkit text rendering fix */
    margin-left: 15em;
}
.wrapper .tooltip {
    background: #1496bb;
    color: #fff;
    display: block;
    margin-bottom: 15px;
    padding: 20px;
    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);
    margin-left: -16em;
    margin-top: -4em;
    opacity: 0;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
 .wrapper .tooltip:before {
    bottom: -20px;
    content:" ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
}
/* CSS Triangles - see Trevor's post */
 .wrapper .tooltip:after {
    border-top: solid transparent 10px;
    border-bottom: solid transparent 10px;
    border-left: solid #1496bb 10px;
    bottom: calc(50% - 5px);
    content: " ";
    height: 0;
    left: 100%;
    margin-left: 0px;
    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);
}
/* IE can just show/hide with no transition */
 .lte8 .wrapper .tooltip {
    display: none;
}
.lte8 .wrapper:hover .tooltip {
    display: block;
}

Answer 2

刚刚更新 -

http://jsfiddle.net/t570goyv/4/

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

Answer 3

检查此working demo并告诉我它是否符合您的要求。我刚刚定位了工具提示和箭头元素，并将css动画从 transitionY 更改为 transitionX 。

CSS：

.wrapper {
  text-transform: uppercase;
  background: #ececec;
  color: #555;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 20px;
    float:right;
  padding: 15px 20px;
  position: relative;
  width: 200px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.wrapper .tooltip {
  background: #1496bb;
  right: 110%;
  color: #fff;
  display: block;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 100%;
    top: -180%;
  -webkit-transform: translateX(10px);
     -moz-transform: translateX(10px);
      -ms-transform: translateX(10px);
       -o-transform: translateX(10px);
          transform: translateX(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);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
  border-top: solid transparent 10px;
border-bottom: solid transparent 10px;
border-left: solid #1496bb 10px;

  content: " ";
  height: 0;
  top: 45%;
    right:-10px;
  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);
}

    /* IE can ju

st show/hide with no transition */
.lte8 .wrapper .tooltip {
  display: none;
}

.lte8 .wrapper:hover .tooltip {
  display: block;
}

希望它有所帮助。