前端 - 标签TITLE属性出现的时间怎么修改？

Question

标签TITLE属性出现的时间怎么修改？

Answer 1

如果你只需要改一个标签的title 这样就可以

<script type="text/javascript">
  var hoverTimer;
  var hoverDelay = 1000; 

  function handleMouseOver() {
    hoverTimer = setTimeout(function() {
      document.title = "New Title";
    }, hoverDelay);
  }

  function handleMouseOut() {
    clearTimeout(hoverTimer);
    document.title = "Old Title";
  }
</script>

<div onmouseover="handleMouseOver()" onmouseout="handleMouseOut()">Hover over me</div>

如果想要统一控制

<script type="text/javascript">
  var hoverTimer;
  var hoverDelay = 1000; 

  function handleMouseOver(element, newTitle) {
    hoverTimer = setTimeout(function() {
      document.title = newTitle;
    }, hoverDelay);
    element.setAttribute('data-original-title', document.title);
    element.removeAttribute('title');
  }

  function handleMouseOut(element) {
    clearTimeout(hoverTimer);
    var originalTitle = element.getAttribute('data-original-title');
    element.setAttribute('title', originalTitle);
  }

  var elements = document.querySelectorAll('[data-toggle="tooltip"]');
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    var newTitle = element.getAttribute('data-title');
    element.addEventListener('mouseover', function() {
      handleMouseOver(this, newTitle);
    });
    element.addEventListener('mouseout', function() {
      handleMouseOut(this);
    });
  }
</script>

在对应的标签中加上 data-toggle="tooltip" data-title="fk me!" 即可

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-title="fk me!">Button</button>