I have following jQuery code:
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
html: true
});
How to do the same without jQuery?
-
1Show me a jsfiddle of what happensAsperger– Asperger2016-05-08 04:29:35 +00:00Commented May 8, 2016 at 4:29
-
1This appears to be a tooltip plugin dependent on jquery. So, you may need to load jquery rather than pure jsArun Sharma– Arun Sharma2016-05-08 04:32:32 +00:00Commented May 8, 2016 at 4:32
-
@Asperger here it is jsfiddle.net/joshvito/v4p24ak8/1Julian David Bautista Osorio– Julian David Bautista Osorio2016-05-08 05:01:04 +00:00Commented May 8, 2016 at 5:01
-
@JulianDavidBautistaOsorio jsfiddle.net/v3ycehndAsperger– Asperger2016-05-08 05:15:27 +00:00Commented May 8, 2016 at 5:15
-
Just for a first glimpseAsperger– Asperger2016-05-08 05:15:35 +00:00Commented May 8, 2016 at 5:15
|
Show 1 more comment
1 Answer
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.
Comments
