JavaScript equivalent of this jQuery code

Question

I have following jQuery code:

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

How to do the same without jQuery?

Answer 1

Let me tell you that this is not ideal Javascript code but I kept it this way on purpose so that you can clearly see the steps involved.

I could create a perfect a equivalent but I will let you play around now : )

PS: Little mission for you. Try to add a second parameter that lets you choose the direction of the tooltip in relation to the target.

Here the 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)

If you want it get html and place it into the tooltip then you can do so with innerHTML (I hate it it).

If you want to get the content from another page and paste it onto your tooltip you can do so with AJAX .