在工具提示的 "Title Attribute" 中显示 "Today Date" – Bootstrap

Question

我用JS调用今天的日期

  <script>
    var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var n = new Date();
    var y = n.getFullYear();
    var m = n.getMonth();
    var d = n.getDate();
    document.getElementById("today").innerHTML = d + " " + months[m] + " " + y;
  </script>

现在我想在工具提示中使用这个字符串作为标题属性 (bootstrap)。

<span class="font-size-1" data-toggle="tooltip" data-html="true" title="here should go the string TODAY">Today</span>

只是行不通。那里有人看到这个问题吗？如何在标题中添加 id="today" 或基本上显示在工具提示中？

PS。如果我将它嵌套在 P 中，日期显示正常（因此 JS 正常）：

<p id="today"></p>

Answer 1

所以你想在跨度的工具提示上显示日期，对吗？只需将标题设置为 today 并将跨度设置为 id。这对你有用吗？

var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var n = new Date();
    var y = n.getFullYear();
    var m = n.getMonth();
    var d = n.getDate();
    document.getElementById("today").title = d + " " + months[m] + " " + y;

<span class="font-size-1" data-toggle="tooltip" data-html="true" id="today">Today</span>

Answer 2

使用title作为函数。我还使用 toLocaleString():

缩短了你的日期计算

$('span.custom').tooltip({
  title: function() {
    return new Date().toLocaleString("en-GB", {day: '2-digit', month: 'long', year: 'numeric'})
  }
})

body {
  padding: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<span class="custom font-size-1 font-weight-bold" data-toggle="tooltip" data-html="true">Today</span>

在工具提示的 "Title Attribute" 中显示 "Today Date" – Bootstrap

Show "Today Date" in the "Title Attribute" of a tooltip – Bootstrap

javascript

attributes

date