Relatively new to javascript and jquery and I have a couple of questions on event listeners in jquery.
So I have an HTML form that dynamically generates a table.
The objective is to create an event such that when I hover over a certain cell, a popup will appear next to it.
I tried this:
HTML - The tag the JS is connected to
let td_inter = document.createElement('td')
td_inter.innerHTML = "test"
td_inter.classList = 'popover'
td_inter.setAttribute('data-html', 'test')
td_inter.setAttribute('data-position',"bottom left")
td_inter.setAttribute('data-variation',"very wide")
JS
$(document).on("mouseover", 'td.popover', function() {
$('td.popover')
.popup({
on: 'hover',
});
})
The reason why I tried this is that I have a previous static div above with the following code that worked.
HTML - The tag the JS is connected to
<div class='thirteen wide field'>
<div class='desc' id='test_desc' data-html="" data-position="bottom left" data-variation="very wide">
<label for="test">test label</label>
</div>
</div>
JS
$('div.desc')
.popup({
on: 'hover',
});
I realize I needed to use the .on to make it work for the dynamically generated table, but it seems not to be working. The event seems to work when I hover (I tried just to console.log) but I cant get the popup to show. Do I have to place it in a div?
additional background: I am using semantic ui if that helps. I also included these resources if this helps:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
To all those interested, I had to restructure my dynamic table to generate it into something like this:
HTML:
<table class="ui table">
<thead>
<tr>
<th class="one wide">Key</th>
<th class="two wide">Value</th>
</tr>
</thead>
<tbody>
<tr class="popover">
<td>1</td>
<td>Foo</td>
</tr>
<div class="ui popup mini transition hidden">Foo Longer</div>
</tbody>
</table>
JS:
$(document).on('mouseover', '.popover', function() {
$(this)
.popup({
popup: $('div.popup'),
inline:true,
on:'hover',
position: 'right center',
lastResort: 'right center',
}).popup('show');
});
div.popup is set to hidden and will become visible once the event is satisfied (mouseover in this case).