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进行操作。

JavaScript相当于这个jQuery代码

1 个答案: