0

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

工具提示1

但是，一旦上传了<div>文件信息出现在其中的文件，就会将div>工具提示的 < 推到右侧。

工具提示2

工具提示的 CSS

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

对于左侧的相邻 DIV

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

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

谢谢

4

4 回答 4

2

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

于 2013-07-01T21:50:35.310 回答
1

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

于 2013-07-01T21:51:08.890 回答
0

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

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

并使绝对位置和左侧边距超过按钮的宽度

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

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

您可以尝试不使用顶部和左侧，可能会更好或根据您的布局

于 2013-07-01T21:49:16.597 回答
-2

漂亮的？没有。功能性？是的。如果我已经工作了 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>
于 2013-07-01T22:26:33.427 回答