Подсказка стиль с css не работает, все еще видя подсказку по умолчанию?

Question

Я пытаюсь создать подсказку при наведении, но без успеха.

Вот мой код:

CSS

.header_menu_res ul li a:hover:after { 
content: attr(title); 
color: #fff; 
background: #333; 
background: rgba(51,51,51,0.75); 
padding: 5px; 
position: absolute; 
left: -9999px; 
opacity: 0; 
bottom: 100%; 
white-space: nowrap; 
-webkit-transition: 0.25s linear opacity; 
height: 100px !important; 
} 

HTML

<div class="header_menu_res"><ul><li><a class="primary" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium" href="http://www.test.co.uk/"><em class="icon-home"></em>Home</a></li></ul></div> 

Когда я парить над якорем я еще увидеть кончик инструмента по умолчанию? Любая помощь очень ценится.

Answer 1

Используйте приведенный ниже код

скрипку: http://jsfiddle.net/tDQWN/

a { 
    color: #900; 
    text-decoration: none; 
} 

a:hover { 
    color: red; 
    position: relative; 
} 

a[title]:hover:after { 
    content: attr(title); 
    padding: 4px 8px; 
    color: #333; 
    position: absolute; 
    left: 0; 
    top: 100%; 
    z-index: 20; 
    white-space: nowrap; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222; 
    -webkit-box-shadow: 0px 0px 4px #222; 
    box-shadow: 0px 0px 4px #222; 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); 
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc); 
} 

Источник: How to change the style of Title attribute inside the anchor tag?

Answer 2

Поведение всплывающей подсказки по умолчанию, в браузерах, которые его имеют, это полностью вне сферы и контроля CSS. Это одна из основных причин использования «подсказок CSS». Но это также означает, что в CSS и других случаях нет способа предотвратить появление всплывающей подсказки по умолчанию, за исключением исключения атрибута title.

Обычный сценарий заключается в том, что при использовании всплывающих подсказок CSS вы не используете атрибут title, но размещаете нужный текст всплывающей подсказки в другом месте, например. в атрибуте data-title (который не имеет абсолютно никакого эффекта, кроме как в соответствии с вашим CSS и/или кодом JavaScript) или в обычном элементе рядом с элементом, к которому он относится, обычно скрывается с помощью CSS, за исключением мыши.

Таким образом, самым простым решением является изменение имени атрибута title на data-title, в формате HTML и в CSS.