Question

当用户将鼠标悬停在按钮上时，我想显示一个toop提示。工具提示是一个出现在正确位置的div。

tooltip1

但是，一旦文件上传了文件信息所在的<div>，就会将工具提示的＆lt; div>推到右侧。

tooltip2

CSS for TOOLTIP

.expl {
padding-top: 11px !important;
border-radius: 3px;
color: whitesmoke;
background-color: cornflowerblue;
padding: 7px 9px 5px 9px;
display: none;
float: left;
position: relative !important;
top: 13px;
right: -17px;
display: none;
height: 35px;
-webkit-box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.35);
box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.35);
}

对于左下角的邻居

text-align: center;
float: left;
display: inline-block;

无论如何，我可以让这个工具提示div始终显示在按钮旁边，这样它就位于容器上方，并且不会被它推开？

谢谢

Answer 1

我个人会使用单独的包装器<div>作为上传按钮，并将该包装器设置为position: relative;并将工具提示放在该包装器中并使用position: absolute;，除非您有意尝试工具提示会影响页面的流程。

Answer 2

您是否尝试过使用position：absolute作为工具提示？这将确保当页面上的其他元素发生变化时它不会移动。

Answer 3

在上传div之前放置工具提示div

<div class="expl ...
<div clas="upload-button-wrapper ...

并将位置绝对值和margin-left设置为大于按钮的宽度

.expl {
position: absolute;
margin-left:100px; ... // more than upload button width

因为上传后渲染会有所不同，并且加载了包含文件列表的另一个div，这是使工具提示移位的逻辑，所以在上传div之前把它放到最好的方法

你可以尝试没有顶部和左边，可能更好或根据你的布局

Answer 4

漂亮？不。功能？对。如果我长达20个小时想要快速拼凑一些东西，我就会这样做。由于总是不可预见的项目限制可能使解决方案比无用更糟糕。 ymmv（第2到第5个函数未使用，只是模板的一部分）

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
    index=element.className.indexOf(newStr);
    if ( index == -1)
        element.className += ' '+newStr;
    else
    {
        if (index != 0)
            newStr = ' '+newStr;
        element.className = element.className.replace(newStr, '');
    }
}
function forEachNode(nodeList, func)
{
    var i, n = nodeList.length;
    for (i=0; i<n; i++)
    {
        func(nodeList[i], i, nodeList);
    }
}

window.addEventListener('load', mInit, false);
function mInit()
{
    uploadBtn.addEventListener('mouseover', onBtnHover, false);
    uploadBtn.addEventListener('mouseout', onBtnLeave, false);
}

function onBtnHover()
{
    var btn = byId('uploadBtn');
    var xPos, yPos;
    xPos = btn.offsetLeft + btn.offsetWidth + 32;
    yPos = btn.offsetTop;

    var tgt = byId('popup');

    var btnHeight, popupHeight;
    btnHeight = btn.offsetHeight;
    popupHeight = tgt.offsetHeight;

    var vertOffset = (popupHeight-btnHeight) / 2;

    var styleStr = "display: inline-block; visibility: visible;";
    tgt.setAttribute('style', styleStr);
    tgt.style.left = xPos+"px";
    tgt.style.top = yPos-vertOffset+"px";
}
function onBtnLeave()
{
    var tgt = byId('popup');
    tgt.removeAttribute('style');
}


</script>
<style>
.controls
{
    border: solid 2px #aaa;
    padding: 16px;
}
#popup
{
    visibility: hidden;
    z-index: 2;
    position: absolute;
    max-width: 300px;
    border-radius: 4px;
    font-family: verdana;
    background-color: #6495ee;
    color: white;
    padding: 8px;
    font-size: 0.8em;
    box-shadow: 4px 4px 2px rgba(0,0,0,0.3);
}
#popup b
{
    background: white;
    color: black;
    padding: 4px;
    border-radius: 4px;
    border: solid 1px #777;
}
</style>
</head>
<body>
    <div class='controls'>
        <button id='uploadBtn'>Upload<br>file(s)</button>
    </div>
    <div id='popup'>To upload multiple files, <b>Shift</b> + click files in the dialog box..</div>
</body>
</html>

做一个兄弟姐妹不要把它的兄弟推到左边

4 个答案: