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

-1

您好，我已经从Google下载了一些用于我的DIV之一的工具提示的代码。如何在DIV的左侧显示工具提示

在这里的刀尖上DIV的顶部显示我要的是显示在DIV的左侧的工具

尖而且应该有很长的高度。

我是初学者到CSS我尽我所能，但我找不到解决方案。

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>

来源

2014-10-30 Priya bapat

请创建一个JSFiddle（http://jsfiddle.net/）并在此处发布链接，以便我们可以看到问题所在。 – 2014-10-30 05:41:41

http://jsfiddle.net/t570goyv/ JSFiddle链接在这里 – 2014-10-30 05:44:11

如果我的理解没错，这里就是你需要的东西：

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; 
}

来源

2014-10-30 05:47:54 Duetschpire

有些点你的权利，但在这里是指示div的小符号我的意思是这个>>>是底部它也必须是左边 – 2014-10-30 05:50:16

对不起符号>>>应该在正确的 – 2014-10-30 05:58:09

这里是更新的提琴手，代码固定为箭头 http://jsfiddle.net/n6scfd6n/1/ – Duetschpire 2014-10-30 06:00:12

刚刚更新 -

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; 
}

来源

2014-10-30 06:06:34 codebot

检查这个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; 
}

希望它能帮助。

来源

2014-10-30 06:16:08 Prateek

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

回答

相关问题