I am using below code also find the code here .Could you please help on this.
<table>
<tbody>
<tr class="myrow1">
<td class="cpCode">
<span rel="replace">Need PopOver</span>
</td>
</tr>
jQuery(function($) {
$('[rel=replace]').popover({trigger: 'hover',
placement : 'top',
html: 'true',
content :'Hello'
});
});
I saw your fiddle, you missed bootstrap/jquery files, here is the same fiddle and it is working fine
$(document).ready(function(){
$('[rel="replace"]').popover({
trigger: 'hover',
placement : 'bottom',
html: 'true',
content :'Hello'
});
});
Related
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>
can you just try below code in JS instead of using document.mouseover:
$('td.popover')
.popup({
on: 'hover',
});
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).
sample: https://jsfiddle.net/gr0e4cwt/11/
Table without table-responsive class div works perfectly with the sortable options of api jquery ui,
$(document).ready (function () {
$("#sortable").sortable ({
scroll: true,
scrollSensitivity: 20,
scrollSpeed: 40,
});
$("#sortable").disableSelection ();
});
<table class = "table-hover table-striped">
<tr> <td> many, many lines <td> </tr>
</table>
But when we put the responsiveness option in the table the options described above do not work
<div class = "table-responsive">
<table class = "table-hover table-striped">
<tr> <td> many, many lines <td> </tr>
</table>
</div>
The scroll: true, scrollSensitivity: 20, scrollSpeed: 40 options stop working.
How do these options work together with the div class of resposivity?
$("# sortable").sortable ({
is invalid.
Use
$("#sortable").sortable ({
I have a data-binded list with one of the columns displaying a popover:
<tbody data-bind="foreach: tehTab()">
<tr>
<td data-bind="text: $data.Category"></td>
<td data-bind="text: $data.Name"></td>
<td><button type="button" class="btn" onclick="getInfo(this.id)" data-bind="attr: { id: $data.Id}, text: $data.Value" style="border:none; background-color:white"></button></td>
</tr>
</tbody>
and the getInfo function:
function getInfo(click) {
$('#' + click).popover({
content: 'Dana' + Math.random(),
html: true
});
}
My only problem is that the popover appears on the second click, but I don't know why. Is there something I need to add?
Found the reason :) On the first click my popover is being initialized and on the second one is displayed. The solution for it was:
function getInfo(click) {
$('#' + click).popover({
content: 'Dana',
html: true
});
$('#' + click).popover("show");
}
Got the same issue, when initializing different way. The solution for me was to initialize it like:
$(document).on("page:load ready", function(){
$('body').popover({selector: '.my-popover-class', trigger: 'click'});
})
Further options for popover() are here.
I'm attempting to put a bootstrap popover inside another popover. The first popup functions correctly (opens and has the HTML content specified) but the second, while opening properly seems to not have any of the settings I set enabled (html:true, trigger:'manual', or the html content). See the demo below:
Fiddle
<div>
Click
<div id="popover_content_wrapper1" style="display: none">
Click again
</div>
<div id="popover_content_wrapper2" style="display: none">
<b>Hello world</b>
</div>
</div>
$('#popover1').popover({
html: true,
trigger: 'manual',
content: function() {
return $('#popover_content_wrapper1').html();
}
});
$(document).on('click', '#popover1', function() {
$(this).popover('toggle');
});
$('#popover2').popover({
html: true,
trigger: 'manual',
content: function() {
return $('#popover_content_wrapper2').html();
}
});
$(document).on('click', '#popover2', function() {
$(this).popover('toggle');
});
I'd appreciate any tips/help.
Thanks!
That happens because at the time you initialize #popover2, it still doesn't "exists". It will only exists once the #popover1 is toggled.
So, you have to initialize it every time you toggle #popover1, because when it hides, it is removed from DOM (children included)
$(document).on('click', '#popover1', function() {
$(this).popover('toggle');
$('#popover2').popover({
html: true,
trigger: 'manual',
content: function() {
return $('#popover_content_wrapper2').html();
}
});
});
http://jsfiddle.net/kg7nyo6e/1/
As bootstrap does not support popover inside a popover, I have initialised popover inside the content of the first popover. You can simply add following javascript code in the first popover content as follows.
<script>
jQuery(function () {
jQuery('[data-toggle="popover"]').popover();
});
</script>
Hope it can help.
Can anyone explain how to use popover on a table element using Codeigniter?
<td> <span id="popover" data-toggle="popover" data-content="<?php echo $userData[$i]->name; ?>"></span><?php echo custom_echo($userData[$i]->name,15); ?></td>
And javascript code is
<script>
$(document).ready(function() {
$("#popover").popover({
html: true,
animation: false,
placement: "bottom"
});
});
</script>
What exactly is not working?
Using your code, I have guessed how output html would look like:
<table>
<tr>
<td><span id="popover" data-toggle="popover" data-content="user name in popover">user name in span</span></td>
</tr>
</table>
I have also added your script in onLoad event:
$("#popover").popover({
html: true,
animation: false,
placement: "bottom"
});
I have included some resources:
jQuery
bootstrap.min.js
bootstrap.min.css
And it all works fine, as you can see in this jsfiddle: http://jsfiddle.net/d2k8zzsw/1/