HTML: остановить дочерние элементы от наследования родительского атрибута [title]

Проблема заключается в том, что когда я объявляю атрибут title для элемента 'wrapper', подсказка появляется, когда курсор также попадает в элемент 'content'. Как предотвратить это (наследование)?

<style> 
  #content{ margin:25px;}
</style>

<div id='wrapper' title='example'>
  <div id='content'>

  </div>
</div>

(Я хочу, чтобы подсказка отображалась между краями элементов "content" и "wrapper", а не в обоих)

Ответ 1

Я не думаю, что это возможно с помощью чистого CSS или HTML.

Один из способов взломать это использование кода на стороне клиента. Пример простого простого JavaScript:

window.onload = function() {
    var oDiv = document.getElementById("content");
    oDiv.onmouseover = function() {
        this.parentNode.setAttribute("old_title", this.parentNode.title);
        this.parentNode.title = "";
    };
    oDiv.onmouseout = function() {
        this.parentNode.title = this.parentNode.getAttribute("old_title");
    };    
};

Это "очистит" родительский заголовок div при наведении мыши на содержимое и восстановит заголовок, когда мышь оставит содержимое.

Живой тестовый пример: http://jsfiddle.net/UASPZ/

Ответ 2

У меня была та же проблема. Я узнал, что вы можете предотвратить это, предоставив дочерним элементам фиктивный заголовок title=" ".

Ответ 3

Такая же проблема здесь.

Обнаружено, что указание title=' ' работает для Chrome и FireFox, но показывает раздражающий подсказку с одним пробелом в IE. title='' работает для IE, но полностью игнорируется Chrome и FireFox, тем самым демонстрируя родительский подсказку.

Не понял, как сделать в кросс-браузере: (