帶有CSS Tooltip的HTML5（php）顯示遠離超鏈接

如果我將鼠標懸停在超鏈接上，工具提示顯示，但不是它應該顯示。它顯示在超鏈接下方几英寸處。我從互聯網的演示中獲得了代碼。帶有CSS Tooltip的HTML5（php）顯示遠離超鏈接

如何獲取超鏈接下的工具提示？

這裏是PHP代碼我使用：

<p> 
    <a href="#" class="tooltip">... 
     <span> 
     13/04/2013 om 13:49<br /> 
     15/04/2013 om 12:50<br /> 
     29/04/2013 om 16:00<br /> 
     </span> 
    </a> 
</p>

這裏是CSS屬於它：

if ($teller == 3) { 
    echo '<p><a href="#" class="tooltip">...<span>'; 

    foreach ($bericht->datums as $date) { 
     echo date('d/m/Y', strtotime($date->datum)) . ' om ' . date('H:i', strtotime($date->beginUur)) . '<br />'; 
    } 

     echo '</span></a></p>'; 
    }

中HTML上方產生該代碼的代碼：

a.tooltip span { 
    position:absolute; 
    z-index: 999; 
    white-space:nowrap; 
    bottom:9999px;  
    background:#81b0b0; 
    color:#e0e0e0; 
    padding:5px 12px; 
    line-height: 24px; 
    height: auto; 
    opacity: 0; 
    transition:opacity 0.5s ease-out; 
    } 

a.tooltip span::before { 
    content: ""; 
    display: block; 
    border-left: 6px solid #81b0b0; 
    border-top: 6px solid transparent; 
    position: absolute; 
    top: -6px; 
    left: 0px; 
} 

a.tooltip:link { 
    color:#FFF; 
} 

a.tooltip:visited { 
    color:#FFF; 
} 

a.tooltip:hover span { 
    opacity: 1; 
    bottom:-35px; 
    }

有人可以幫我嗎？謝謝！）

來源

2013-04-13 Lewis

+1張貼生成的代碼，這真是幫了我:) – CodeMonkey

當您使用

position:absolute;

它定位針對在具有位置集合中的鏈最近的容器;所以如果你沒有設置任何包含它的元素或其父母的位置，它將對着身體定位。

嘗試把位置的絕對或相對的包含p標籤

來源

2013-04-13 14:36:28 CodeMonkey

我做到了相對的，顯示：塊，現在好多了。但現在它不斷強調，即使是文本修飾：沒有。 – Lewis

修正了它。謝謝 – Lewis

帶有CSS Tooltip的HTML5（php）顯示遠離超鏈接

回答

相關問題