Показать содержимое CSS выше всего остального

Question

Я нашел очень простой пример CSS для создания пользовательских всплывающих подсказок с настройкой content, и демонстрация его выглядела великолепно. Я взял стиль и внедрил его в свою собственную страницу, однако я быстро заметил, что всплывающая подсказка, по-видимому, использует ширину min-width как ширину и отображается ниже всего остального.

Я пробовал десятки вариантов, и до сих пор ничто не помогло решить эту проблему. Может ли кто-нибудь объяснить, как это можно исправить?

span[data-tooltip] 
{ 
    position: relative; 
    cursor: help; 
} 
span[data-tooltip]:hover:after 
{ 
    content: attr(data-tooltip); 
    display: inline-block; 
    position: absolute; 
    top: 1em; 
    right: -200%; 
    background: rgba(240,240,240,1.0); 
    border: 1px solid rgba(0,0,0,1.0); 
    min-width: 10em; 
    padding: 0.25em; 
    text-shadow: none; 
} 

HTML:

<span data-tooltip='Tool Tip'><img src='http://www.economicmodeling.com/wp-content/uploads/Info-icon.jpg' width=12px height=12px></span> 

Answer 1

z-index Использование:

span[data-tooltip]:hover:after 
{ 
    content: attr(data-tooltip); 
    display: inline-block; 
    position: absolute; 
    top: 1em; 
    right: -200%; 
    background: rgba(240,240,240,1.0); 
    border: 1px solid rgba(0,0,0,1.0); 
    min-width: 10em; 
    padding: 0.25em; 
    text-shadow: none; 
    z-index:99; 
} 

MDN Docs