如何将id为demo的倒计时内容写入HTML的data-title属性？

我明白你的需求了——你想把原本要显示在demo元素里的倒计时动态内容，放到那个带ya-content类的图标元素的data-title属性中，用来作为tooltip的提示内容对吧？之前尝试用data-title-id="demo"的方式没效果，是因为没有内置的机制帮你自动同步这个内容，得手动用JavaScript来实现，下面是具体的解决步骤：

1. 调整你的HTML结构 #

首先，先把HTML里多余的<td>标签去掉（在<li>里放表格单元格不太合适），然后给目标图标元素加一个方便选择的ID，比如countdown-tooltip：

<li class="nav-item">
  <a class="nav-link">
    <span class="d-none d-md-inline-block">global Time : 
      <i id="countdown-tooltip" class="ya ya-content" data-toggle="tooltip" data-placement="bottom" data-title=""></i>
    </span>
  </a>
</li>

2. 修改倒计时的JavaScript逻辑 #

原来的代码是把倒计时内容写入demo元素的innerHTML，现在我们要改成更新目标元素的data-title属性。另外，如果你的tooltip是用Bootstrap的Tooltip组件，修改data-title后还需要刷新tooltip，否则提示内容不会更新。

修改后的JavaScript代码如下：

<script>
var currentDate = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
var day = currentDate.getDate();
var month = currentDate.getMonth();
var year = currentDate.getFullYear();

// 设置倒计时目标时间
var countDownDate = new Date(year, month, day, 12).getTime();

// 获取tooltip元素
var tooltipEl = document.getElementById('countdown-tooltip');

// 初始化Bootstrap Tooltip（如果用了的话）
if (tooltipEl) {
  $(tooltipEl).tooltip();
}

// 每秒更新倒计时
var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = countDownDate - now;

  // 计算时分秒
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  var countdownText = hours + " : " + minutes + " : " + seconds;

  // 更新data-title属性
  if (tooltipEl) {
    tooltipEl.setAttribute('data-title', countdownText);
    // 如果用了Bootstrap Tooltip，刷新提示内容
    $(tooltipEl).tooltip('dispose').tooltip();
  }

  // 倒计时结束后的处理
  if (distance < 0) {
    clearInterval(x);
    if (tooltipEl) {
      tooltipEl.setAttribute('data-title', "EXPIRED");
      $(tooltipEl).tooltip('dispose').tooltip();
    }
  }
}, 1000);
</script>

3. 保留原有的CSS和依赖 #

你的CSS样式和jQuery依赖可以继续保留：

.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, .8); }
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link { padding-right: 10px; padding-left: 10px; }
}
@media (min-width: 768px) {
  .d-md-inline-block { display: inline-block!important; }
}
.ya { display: inline-block; font-weight: 400; font-style: normal; line-height: 1; font-family: nucleo; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ya-content::before { content: "\E015"; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 如果用Bootstrap Tooltip，记得引入Bootstrap的JS和CSS -->

为什么data-title-id="demo"没用？ #

因为无论是原生HTML还是常见的前端框架（比如Bootstrap），都没有内置这个属性来自动同步另一个元素的内容到data-title里。这种动态内容的同步，必须通过JavaScript手动监听内容变化或者直接在更新逻辑里同时修改目标属性。

内容的提问来源于stack exchange，提问作者Kimo Atomix