相当于此 jQuery 代码的 JavaScript

Question

我有以下 jQuery 代码:

$('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
    html: true
});

没有 jQuery 如何做同样的事情？

Answer 1

让我告诉你，这不是理想的 Javascript 代码，但我故意保持这种方式，以便你可以清楚地看到所涉及的步骤。

我可以创造一个完美的等价物，但我现在会让你玩:)

PS:给你的小任务。尝试添加第二个参数，让您选择工具提示相对于目标的方向。

这里是 JSFiddle:https://jsfiddle.net/v3ycehnd/2/

var elem = document.getElementById("sample");
var tooltip = document.getElementsByClassName("tooltip");

function showToolTip(target) {
  target.addEventListener("mouseover", function(){
    tooltip[0].style.top = this.getBoundingClientRect().bottom + "px";
    tooltip[0].style.opacity = 1;
    tooltip[0].style.transform = "scale(1)";
  });

  target.addEventListener("mouseleave", function(){
    tooltip[0].style.opacity = 0;
    tooltip[0].style.transform = "scale(0)";
  });
}

showToolTip(elem)

如果你想让它获取 html 并将其放入工具提示中，那么你可以使用 innerHTML(我讨厌它)。

如果您想从另一个页面获取内容并将其粘贴到您的工具提示上，您可以使用 AJAX 来实现。