Как обновить всплывшую подсказку от атрибута title?

Question

[alexalexes]

Есть html-элемент с атрибутом title.

<div title="" onmouseover="set_title_data(this)">Базовая инфа</div>

При наведении мыши обработчик подставляет туда предварительный текст, и через некоторое время вставляет другой текст (я написал имитацию задержки получения данных через ajax-запрос).

function set_title_data(target)
{
   if(target.getAttribute('title') === '')
   {
      target.setAttribute('title', 'Ждите, идет загрузка данных...');
      setTimeout(function()
      {
              target.setAttribute('title', 'Готово! Данные получены!');
      }, 2000);
   }
}

Собственно, что происходит, и что требуется.
Когда пользователь наводит мышь на элемент, текст успевает подставится в title и браузер отображает подсказку "Ждите, идет загрузка данных...". Если мышь не отводить и в это время обновится title, то выведенная подсказка не заменится (проверено в Chrome и Firefox).
Только IE реагирует на смену title гашением подсказки и выведением ее вновь.
Можно ли добиться такого же поведения в остальных браузерах, не используя дополнительные JQuery-плагины, заменяющие родной вывод подсказок?

Answer 1

[Anton fon Faust]

https://jsfiddle.net/anton4ept/vky19c6o/ например так.
А почему... предполагаю, дело в оптимизации отрисовки изменений.
IE почему такой тормозявый?)

Comments

[alexalexes]

Я пытался манипулировать display, пробовал уводить из под курсора элемент, манипулируя index, положением элемента, отступами, но отображенная подсказка не менялась.
Не знал про display: initial, это свойство дает эффект в Chrome, но Firefox 59.0.2 остается при себе.
IE не знает значение свойства display: initial, ему нужно предложить block или inline и тд.
С учетом вашего предложения решение будет выглядеть вот так.

function set_title_data(target)
{
  if(target.getAttribute('title') === '')
  {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ") >= 0 || ua.indexOf("Trident/") >= 0 || ua.indexOf("Edge/") >= 0;
    target.setAttribute('title', 'Ждите, идет загрузка данных...');
    setTimeout(function()
    {
      target.setAttribute('title', 'Готово! Данные получены!');
      target.style.display = 'none';
      target.style.display = msie ? 'block' : 'initial';
    }, 2000);
  }
}