留在頂端CSS工具提示

在該圖中，A和B是在DIV圖像。徘徊在A提出的工具提示，但B是模糊它。所需的結果是B不應該使工具提示變得模糊，很明顯。

Relevant HTML

<html> 
<head> 
    <titleMy Website</title> 
    <script src="mywebsite.js"></script> 
    <script src="jq_js/jquery-3.1.1.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="bs/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/mywebsite.css"> 
    <link href='//fonts.googleapis.com/css?family=Lobster' rel='stylesheet'> 
    <link href='//fonts.googleapis.com/css?family=Lobster Two' rel='stylesheet'> 
    <script src="bs/js/bootstrap.min.js"></script> 
</head> 
<body onload = "javascript: isShopperLoggedIn();"> 

    <div class="marginate"> 
    <div id ="headerStrip" class = "bkwhite well well-sm"> 
     <img align="middle" src="images/logo_small.jpg" alt="mywebsite"/> 
     : 
     : 
     : 
     <!-- Shops results --> 

     <div class="shops"> 
     <div class="sHeader"> 
      <p id = "srTitle" class="sTitle"></p> 
     </div> 
     <div id="sResults" class="resultsDiv"> 
     </div> 
     </div> 
    </div> 

    </body> 
    </html>

Relevant JavaScript/JQuery

function drawCard(array) 
{ 
    var sResultsDiv = document.getElementById('sResults'); 
    sResultsDiv.innerHTML = ""; 

    var html = [""]; 

    $.each(array, function(cardNum, value) 
    { 
    logoID = "logo" + cardNum; 

    logo = array[cardNum].logo; 
    logo = logo.replace("..", "gs"); 
    name = array[cardNum].name; 
    addr = array[cardNum].address; 
    mob = "Mob.: " + array[cardNum].mobile; 
    ll = "Land: " + array[cardNum].landline; 
    tooltiptext = '<b>' + name + '</b><br/>' + addr + '<br/>' + mob + ' | ' + ll; 

    htmlFString = [ '<div class="logo-container">', 
       '<div>', 
       '<div class="logo sFront" id=sf' + cardNum + '>', 
       '<div class="tooltiptext">' + tooltiptext + '</div>', 
         '<img id="' + logoID + '" src="' + logo + '" class="logo_img">', 
         '</div>', 
         '</div>', 
         '</div>' 
        ].join(''); 
    html += htmlFString; 
    }); 

    sResultsDiv.innerHTML = html; 

} // of drawCard(cardData, cardNum)

Relevant CSS

.shops 
{ 
    margin-left: 28%; 
    margin-top: 2%; 
    width:auto; 
    height: 13%; 
    padding: 8px; 
    border-radius: 6px; 
    overflow-y: auto; 
    box-shadow: 1px 1px 1px 1px darkgray; 
} 

.sHeader 
{ 
    background-color: white; 
    padding: 2px; 
    color: darkgray; 
    text-align: left; 
    top: 648px; 
    width: auto; 
    left: 30%; 
    position: fixed; 
} 

.resultsDiv 
{ 
    margin-top: 10px; 
} 

.sFront 
{ 
    width: 110px; 
    height: auto; 
    z-index: 1000; 
    position: relative; 
    top: 0; 
    left: 0; 
} 

.logo-container 
{ 
    display: inline-table; 
    perspective: 1000px; 
    width: 110px; 
    height: auto; 
} 

.logo 
{ 
    margin: 1px; 
    float: left; 
    display: table-cell; 
    flex-flow: row wrap; 
    transition: 0.6s; 
} 

.logo_img 
{ 
    display: block; 
    margin:auto; 
    width: 50%; 
} 

.logo .tooltiptext 
{ 
    visibility: hidden; 
    font-size: 12px; 
    width: 245px; 
    height: auto; 
    background-color: black; 
    color: lightgray; 
    text-align: left; 
    border-radius: 6px; 
    padding: 5px; 
    position: absolute; 
    z-index: -1; 
    left: 80%; 

    opacity: 0; 
    transition: opacity 1s; 
} 

.logo .tooltiptext::after { 
    content: ""; 
    position: absolute; 
    top: 35%; 
    right: 100%; 
    margin-top: -15px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: transparent black transparent transparent; 
} 

.logo:hover .tooltiptext 
{ 
    visibility: visible; 
    display: block; 
    opacity: 1; 
}

看到如此多的解決方案，但沒有人能明確解決這個問題。在其他建議的事情中，嘗試overflow: visible（在幾乎所有的類）都無濟於事。

請讓我知道缺少的東西。

非常感謝提前！

來源

2017-03-22 Narayana J

將'z-index'設置爲較高的數字。 –

將z-index設置爲1000 – imprezzeb

@RobbyCornelissen，謝謝！在上面顯示的唯一一個類中，我將其更改爲「z-index：9999」。沒有運氣... –

很難確定問題出在沒有看到某些HTML的情況下。

我創建了一個小提琴here。對於工具提示文本，我最終刪除了left: 80%，而是使用了margin-left。機率是不適合你的，因爲我無法從你的CSS推斷你的HTML標記是什麼樣子。如果你更新你的問題，我可以更好地協助解決這個問題。

編輯： 對不起。在查看代碼之後，您會在動態創建元素的JavaScript中出現一些小錯誤。你在你的img元素上缺少一個結束標記，看起來你有一個額外的封閉div元素，似乎沒有任何用處。

最主要的原因，爲什麼你提示是不是因爲你希望它是工作，因爲

您.logo .tooltiptext改變它z-index:-1更改爲類似101大，改變left:80%至20％
在.logo-container刪除perspective:1000
在.sFront刪除position:relative

如果你這樣做，我認爲它會按照你的意圖運作。這是一個jsfiddle。希望有所幫助！

來源

2017-03-22 03:30:45 nraduka

謝謝！你做了同樣的改變，沒有運氣。請查看更新後的問題，它幾乎包含了我正在嘗試的所有內容，還有一些CSS類。 –

謝謝@nraduka！切換到引導工具提示。在我使用你的建議之前，請允許我。 –

剝離（最近添加的）Bootstrap內容，應用您的更改（以及一些非常自定義和不相關的修復），並且工具提示顯示在相鄰圖像上方。現在一切正常，謝謝@nraduka！ –

留在頂端CSS工具提示

回答

相關問題