We Keep Coding

Bootstrap Popover won't show: Error please use show on visible elements

I've created a popover that launches when you click on the specified area with the corresponding data-toggle, it's working perfectly in Chrome but in Firefox I keep getting the error:
Error: Please use show on visible elements
show, _enter, toggle, _setListeners, dispatch, handle
The error resides in the bootstrap.min.js file that is used in my project.
Now I know that it has probably something to do with adding ('show')after the .popover part, but I can't get it to work. My popover function:
// popover initialization - on click
$('[data-toggle="zero-1"]').popover({
html: true,
trigger: 'click',
placement: 'bottom',
// main function when popover fires
content: function engine() {
// execute the actions of the lawmaker() first, then the ruler()
return lawmaker(this,this,this) + ruler((($(this).data('xray'))),(($(this).data('yray'))));
// insert image and close button in popover
function lawmaker(i1,a1, b1,) {
// get the data-image str value
var mig = $(i1).data('img');
// console.log(mig);
// return the visuals and close button for the popover
return '<img src="' + mig + '" /> <button id="close-popover" data-toggle="clickover" class="btn btn-small btn-primary pull-right" onclick="$(\'.popover\').remove();">Close please!</button>';
}
}
});
.popover {
position: absolute;
transform: translate3d(258px, 63px, 0px);
top: 0px;
left: 0px;
will-change: transform;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<map>
<area class="grz" data-toggle="zero-1" data-xray="105" data-yray="70" shape="rect" coords="80,60,130,80" href="javascript://" data-img="img/zero/zero-2.png" title="Zero">
</map>
Any thoughts in solving this problem? :)

When I tried to initialize tooltip via javascript, tooltip din't work, yet there was no error. I got the same error as you've quoted in the question when I used $(element).tooltip().tooltip('show').
Here is link to possible reason why that happens https://github.com/twbs/bootstrap/issues/24918.
I ended up just putting html attributes on tooltip element to get it working
<span data-toggle="tooltip" data-placement="right" title="my tootltip content">help</span>

Anchor element onClick makes page jump to top of page

I have a few buttons on my page and onclick they show or hide a few <div> elements.
The <div> elements are positioned towards the bottom of the page so scrolling to those <div> elements is necessary.
Whenever I click on a button, the page jumps to the top. So how do I create an anchor so that when the user clicks the button it will stay on that section of the page?
Here is one of the buttons:
<p class="text-center"><a id="Button-1" class="btn btn-default" href="#" role="button">View Details</a></p>
Here is the <div> that appears when the button above is clicked:
<div class="row">
<div id="Section-1" class="col-md-10">
<p>The section to appear.</p>
</div>
</div>
Here is the JavaScript:
$("#Button-1").click(function () {
$("#Section-2").hide();
$("#Section-3").hide();
$("#Section-1").toggle("show");
$("#Button-1").text(function(i, text) {
return text === "View Details" ? "Hide Details" : "View Details";
});
return false;
});
Here is my research:
Article 1
Any help would be appreciated.
UPDATE
<p class="text-center"><a id="Button-1" class="btn btn-default" href="javascript:void();" role="button">View Details</a></p>
When I click the button.. I scroll down to see the div that appeared.. then click on another button (that look the exact same as above) and the page returns to the top.

Firstly mention the element correctly in the title. Its a a not button.
Next: The # in your a tag will by default take you to the top of the page when you click on it.
Use a javascript:void() in the href attribute to overcome this.
Like <a href='javascript:void();'>something</a>
Example snippet
<div>
Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>
<a href='javascript:void();'>this</a>
</div>

This is because an href starting in "#" jumps to the element of that id. For example, href="#mydiv" jump to the element with an id of "mydiv" (nothing happens if that element doesn't exist, so this could be a solution). In the case where no id is provided (ie. Your case; href="#"), it jumps to the top of the page. My go-to solution is adding a preventDefault to the click handler, which "negates" existing behaviors. It can be done like so:
$('.button').click(function() {
$('#lastclicked').text(this.textContent);
});
$('.button-x').click(function(e) { // Passes the event to the function to allow the prevent default function.
e.preventDefault();
$('#lastclicked').text(this.textContent);
});
// Click each of the buttons and notice how the first two jumps to either the div of the top, but the third button ("button-x") doesn't move anything.
body {
height: 5000px;
padding: 50px;
}
.buttons {
position: fixed;
bottom: 0;
}
.button, .button-x {
display: inline-block;
padding: 20px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
Link with href="#"
Link with href="#mydiv"
Link with href="#", but a preventDefault.
</div>
<div id="mydiv">
Last clicked: <span id="lastclicked"></span>
</div>
The important part is the e.preventDefault(), which is the function that blocks the initial behavior of the anchor tag. All you have to do is put that somewhere in your click handler. Make sure to pass "e" as a parameter.

General fix
Don't use <a>-Tags for your buttons. Convert the <a>-Tags to <button>-Tags or something else (span, p, etc.)
Explanation
That is pretty simple. Your <a>-Tags (namely the buttons) link to '#' which is the so called fragment part of an URI.
Usually fragments are HTML tags which are identified by a name (pre-HTML5)
<a name="top">This is the top section</a>
Jump to top
or an id (HTML5)
<div id="my-section">Coming soon</div>
Jump to my-section
Because you didn't specify the fragment or didn't use correct one the browser will scroll to the top of the page.

Have you tried this solution from http://stackoverflow.com/questions/11815295/javascript-inline-onclick-goto-local-anchor
You can use this function on your anchor:
function goToAnchor(anchor) {
var loc = document.location.toString().split('#')[0];
document.location = loc + '#' + anchor;
return false;
}
Usage:
Anchor
Note that the anchor needs to be enclosed in quotes, without the hash prefix.

update href property of a tag to javascript:void();
<p class="text-center"><a id="Button-1" class="btn btn-default" href="javascript:void();" role="button">View Details</a></p>
Demo
javascript:void(); It'll not let link to navigate anywhere.

I suggest you a different approach more generic. Easiest to use and maintain.
Use only one class for each button to detect the click. And store in data property the element that you want to show.
$(".btn-section").click(function(){
var classToShow = $(this).data("class-show");
$(".section").hide();
$("." + classToShow).show();
});
.section{
display:none;
}
.content{
width:100%;
height:2000px;
background-color:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">Lot of content</div>
<button class="btn-section" data-class-show="section1">Section 1</button>
<button class="btn-section" data-class-show="section2">Section 1</button>
<button class="btn-section" data-class-show="section3">Section 1</button>
<div class="section section1">Section 1</div>
<div class="section section2">Section 2</div>
<div class="section section3">Section 3</div>
This resolve your problem too.

Bootstrap popover offset on first hover

I hope someone can provide a solution for this problem. My situation is that I've got a link that has a bootstrap popover effect, everytime you hover over it, it shows an image. But the problem is that the popover container is always offset on the first time you hover over the link. My Code:
My own code is this:
<a href="{% url 'consilium:detail' movie.slug %}" class="thumbnail title-link" {% if movie.image %} data-toggle="popover" data-placement="left" data-full="{{movie.image.url}}" {% endif %}>
<span class="flex-input">
<input class="get-title" value="{{ movie.title }}" form="movie{{ forloop.counter }}" name="title" readonly/>
</span>
</a>
body .popover {
max-width: 240px;
}
.hover-image {
width: 180px;
}
-
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
container: 'body',
html: true,
placement: 'left',
trigger: 'hover',
content: function() {
var url = $(this).data('full');
return '<img class="hover-image" src="' + url + '">'
}
});
});
and here is a live example:
Fiddle
Anyone knows how to fix that?

The reason this is happening is because Bootstrap absolute positions the popover on the document as soon as it is called. Then the image is loaded changing the popover height - BUT, the popover is not repositioned.
You can set a min height for the popover so that it doesn't change height and therefore doesn't need to be repositioned. Based on your example image, change css to:
body .popover {
max-width: 240px;
min-height: 160px;
}

The problem is that the popover is rendered before the image has downloaded.
To solve this, you could use the manual option in the popover plugin to define a custom hover action to show the popover after the image has loaded like this:
$this.on('mouseenter', function(){
var image = new Image();
image.onload=function(){
$this.popover('show');//Show popover after image loads
}
image.src=url; //Preload image in memory
}).on('mouseleave', function(){
$this.popover('hide');
});
});
See here for the update fiddle

My solution is just to show/hide the tooltip on initialization. Make sure to turn off animation or else there will be a flash of content. If you need animation, you can turn it back on after .tooltip('hide')
$('.xyz').tooltip({
title: "xyz <img src='https://www.idk.com/test.png'alt='blah'/>",
html: true,
placement: 'auto',
animation: false
}).tooltip('show').tooltip('hide') //.data('bs.tooltip').options.animation=true

Display Icon on Specific Div When Hover on Menu

Visit the Icomooon.io and check the function of display icon when we hover on menu ul and an icon appears on another div. Kindly send me the fiddle with their "hover to display an icon on another side" function.

Here is an small example:
$('ul li').hover(function() {
// mouse enter
var logo = $(this).attr("data-icon"); // get logo from data-icon parameter
$('.icon img').attr("src", logo); // change logo
}, function() {
// mouse left
$('.icon img').attr("src", "http://placehold.it/50x50"); // remove logo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="icon">
<img src="http://placehold.it/50x50">
</div>
<ul>
<li data-icon="http://lorempixel.com/50/50/">Item 1
</li>
<li data-icon="http://lorempixel.com/50/50/">Item 2
</li>
</ul>
This jQuery snippet changes the icon of the img element of the div with the icon class. It get's the logo from the data-icon parameter of the single li elements. If you enter the li element with the mouse (hover), it will change the icon. If you leave the mouse, it will go back.
Please notice: In this example are just placeholder images. You can use fixed images for that to get it working as expected.

have you ever examine jquery hoverIntent plugin ?
http://cherne.net/brian/resources/jquery.hoverIntent.html

Working example of on hover changing images
Javascript
$('#one').hover(function(){
$('#iconHolder').empty().prepend('<img id="theImg" width="20" height="20" src="http://image005.flaticon.com/1/svg/109/109255.svg" />')
});
$('#two').hover(function(){
$('#iconHolder').empty().prepend('<img id="theImg" width="20" height="20" src="http://image005.flaticon.com/1/svg/109/109099.svg" />')
});
$('#three').hover(function(){
$('#iconHolder').empty().prepend('<img id="theImg" width="20" height="20" src="http://image005.flaticon.com/1/svg/109/109066.svg" />')
});
HTML
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div id="iconHolder"></div>
<button id="one">one</button><button id="two">two</button><button id="three">three</button>

How do I use popover from Twitter Bootstrap to display an image?

The canonical example for Twitter Bootstrap's popover feature is sort of a tooltip on steroids with a title.
HTML:
hover for popover
JS:
<script>
$("#blob").popover({offset: 10});
</script>
I'd like to use popover to display an image. Is this possible?

Very simple :)
hover for popover
var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />';
$("#blob").popover({ title: 'Look! A bird!', content: img, html:true });
http://jsfiddle.net/weuWk/

Sort of similar to what mattbtay said, but a few changes. needed html:true. Put this script on bottom of the page towards close body tag.
<script type="text/javascript">
$(document).ready(function() {
$("[rel=drevil]").popover({
placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;"> Muah ha ha</div>', //this is the top title bar of the popover. add some basic css
html: 'true', //needed to show html of course
content : '<div id="popOverBox"><img src="http://www.hd-report.com/wp-content/uploads/2008/08/mr-evil.jpg" width="251" height="201" /></div>' //this is the content of the html box. add the image here or anything you want really.
});
});
</script>
Then HTML is:
mischief

simple with generated links :)
html:
<span class='preview' data-image-url="imageUrl.png" data-container="body" data-toggle="popover" data-placement="top" >preview</span>
js:
$('.preview').popover({
'trigger':'hover',
'html':true,
'content':function(){
return "<img src='"+$(this).data('imageUrl')+"'>";
}
});
http://jsfiddle.net/A4zHC/

This is what I used.
$('#foo').popover({
placement : 'bottom',
title : 'Title',
content : '<div id="popOverBox"><img src="http://i.telegraph.co.uk/multimedia/archive/01515/alGore_1515233c.jpg" /></div>'
});
and for the HTML
<b id="foo" rel="popover">text goes here</b>

Here I have an example of Bootstrap 3 popover showing an image with the tittle above it when the mouse hovers over some text. I've put in some inline styling that you may want to take out or change.....
This also works pretty well on mobile devices because the image will popup on the first tap and the link will open on the second.
html:
<h5>Template Preview 1 <i class="fa fa-external-link"></i></h5>
<h5>Template Preview 2 <i class="fa fa-external-link"></i></h5>
<h5>Template Preview 3 <i class="fa fa-external-link"></i></h5>
js:
$('.preview').popover({
'trigger':'hover',
'html':true,
'content':function(){
return "<img src='"+$(this).data('imageUrl')+"'>";
}
});
https://jsfiddle.net/pepsimax_uk/myk38781/3/