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

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 に答える