I have a "Font Awesome" question mark on my webpage. When the user hovers over it, a popover appears via javascript. What's odd (to me), is since the javascript code is AFTER my html code, it works fine.
This works
<div class="margin-top-sm">Enter email: <span class="fa fa-question-circle text--secondary pop" data-container="body" data-toggle="popover" data-placement="right" data-content="My popover text"></span></div>
<script type="text/javascript">
$(".pop").popover({
trigger: "manual",
html: true,
animation: false
})
.on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
</script>
If I place my javascript ABOVE the html however, it doesn't work.
This doesn't work
<script type="text/javascript">
$(".pop").popover({
trigger: "manual",
html: true,
animation: false
})
.on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
</script>
<div class="margin-top-sm">Enter email: <span class="fa fa-question-circle text--secondary pop" data-container="body" data-toggle="popover" data-placement="right" data-content="My popover text"></span></div>
I only ask because this is an mvc website & I'd like to toss my javascript within a "Script" @section tags. My "Script" section is at the top of the page in my <head> section.
So anyway, just curious why this happens?
Thanks
The position of where you place the script tag is indeed important and can have effect your code as you just experienced. Browsers behaves in the way that they parse the HTML from top to bottom, so elements are added to the DOM and scripts are executed as when they are encountered, meaning that order you place the elements and the tags does matters. scripts won't be able to find elements and perform manipulation on them if they appear later in the markup html code because those elements have yet to be added to the DOM.
Let's walk through on what's happening when a browser loads a website with a certain script tag:
script tag referencing an external script file and
requests that file. Meanwhile, the parser blocks (unless the async or defer key word exist) and stops parsing the rest of the HTML.So, in step 4, since the parser didn't yet parse the HTML document, he won't be able to work with the rest of the HTML and that is why your script tag has to be located at the bottom.