JavaScript эквивалент этой JQuery кода

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.