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

Question

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

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

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

  </div>
</div>

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

Answer 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/

Answer 2

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

Answer 3

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

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

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