We Keep Coding

How to display the QR-code in popup box using java script?

I am using the QRcode.js from https://davidshimjs.github.io/qrcodejs/ and it is working fine on my webpage, But I want to show this Generated qr code in dialog/alert box using java script. Can anyone help me how can I do that?

You can use Bootstrap Modal here. Just put <div id="qrcode"></div> inside modal body, and done.
Here is how to use Bootstrap Modal - Bootstrap Modal

Below code use bootstrap to display the QR Code generated by qrcode.js in a popup box:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<a tabindex="0" role="button" class="btn btn-success" data-toggle="popover" data-trigger="focus" data-placement="bottom" title="QR Code" data-url="https://www.gloomycorner.com">Popover QR Code</a>
<div id="qrcode" style="display:none; width:auto; height:auto;padding:15px;"></div>
</div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 120,
height: 120
});
function makeQrcode(e) {
qrcode.makeCode(e.attr("data-url"));
}
jQuery(document).ready(function() {
jQuery("[data-toggle='popover']").popover(
options = {
content: jQuery("#qrcode"),
html: true // important! popover html content (tag: "#qrcode") which contains an image
}
);
jQuery("[data-toggle='popover']").on("show.bs.popover", function(e) {
makeQrcode(jQuery(this));
jQuery("#qrcode").show();
});
});
</script>
How to generate a qr code and display it in a popup box gives a full example.
Screenshot of the example:

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

How to make Bootstrap 3 tooltip follow mouse?

I have a list of links on my site that are showing images in a Bootstrap tooltip
<a data-html="true" data-toggle="tooltip" title="<img src='1.png' />">Item 1</a>
<a data-html="true" data-toggle="tooltip" title="<img src='2.png' />">Item 2</a>
<a data-html="true" data-toggle="tooltip" title="<img src='3.png' />">Item 3</a>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('a').tooltip({
placement: "right"
})
}
</script>
This just brings up the tooltip to the right of all the links. The images are static though, I'd like the tooltip image to move around as the user moves their mouse around.
You can see an example of what I want to do on this site: http://www.hearthpwn.com/decks/381677-druidereno. On the right sidebar, there's a list of cards you can hover over, and the tooltip images follow the mouse movement. Doesn't look like they use Bootstrap, I just want to emulate the functionality.
I don't see anything to do this in the Bootstrap functionality: http://getbootstrap.com/javascript/#tooltips
Anyone know how I can do this?

You cannot do that natively in bootstrap. But you can easily mimick the behaviour by using a "proxy element". The trick is to attach the image tooltip to a second element and then update that elements position according to the mouse position when you move the mouse cursor around inside the image.
An image :
<img id="img" src="https://static.pexels.com/photos/6555/nature-sunset-person-woman-large.jpg" />
A proxy element, here an <i> tag with trigger: manual :
<i id="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip for image" data-animation="false" data-trigger="manual"/>
Set the proxy elements position to absolute so it can be moved around anywhere :
#img-tooltip {
position: absolute;
}
Finally update the proxys position and show the tooltip when you move the mouse cursor around inside the image :
$("#img").on('mousemove', function(e) {
$("#img-tooltip").css({top: e.pageY, left: e.pageX });
$('[data-toggle="tooltip"]').tooltip('show')
})
$("#img").on('mouseleave', function(e) {
$('[data-toggle="tooltip"]').tooltip('hide')
})
demo -> http://jsfiddle.net/h2dL07ns/
Updated demo -> http://jsfiddle.net/h2dL07ns/324/ using #Marks's pointer-events: none; suggestion. It removes any occasional flickering.

enhanced davickon answer for multiple images
$(".img").on('mousemove', function(e) {
$("#" + $(this).attr("TooltipId")).css({
top: e.pageY,
left: e.pageX
});
$("#" + $(this).attr("TooltipId")).tooltip('show');
$(".tooltip-inner").css({
"background-color": $(this).attr("TooltipBackround")
});
var a = ($("#" + $(this).attr("TooltipId")).attr("data-placement") != "") ? $("#" + $(this).attr("TooltipId")).attr("data-placement") : "top";
$(".tooltip-arrow").css("border-" + a + "-color", $(this).attr("TooltipBackround"));
})
$(".img").on('mouseleave', function(e) {
$("#" + $(this).attr("TooltipId")).tooltip('hide')
})
.img-tooltip {
position: absolute;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<h1>header</h1>
<img class="img" src="https://static.pexels.com/photos/6555/nature-sunset-person-woman-large.jpg" TooltipBackround="green" TooltipId="img-tooltip1" />
<i id="img-tooltip1" class="img-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" title="Tooltip for image <h1>Faizan</h1>" data-animation="false" data-trigger="manual"></i>
<br>
<br>
<br>
<br>
<img class="img" src="https://static.pexels.com/photos/6555/nature-sunset-person-woman-large.jpg" TooltipBackround="blue" TooltipId="img-tooltip2" />
<i id="img-tooltip2" class="img-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" data-animation="false" data-trigger="manual" title="Tooltip for image <h1>Faizan Anwer</h1>"></i>

Bind the "mousemove" event listener to the document. Capture the e.pageX, e.pageY movement of the mouse and set the "displayed" tooltip position to where the mouse is. (Requires jQuery)
$(document).on('mousemove', function (e) {
if( $('div.tooltip').css('display') !== 'hidden' ) {
var toolHalfHeight = $('div.tooltip').outerHeight() / 2;
$('div.tooltip').css('left', e.pageX).css('top', e.pageY - toolHalfHeight);
}
});

I was working with angularjs and facing a similar problem. There is no in built functionality in bootstrap for this. I also tried using a proxy element. But, it was causing a lot of problems. For eg. I was not able to click on element below the proxy element. I found one workaround. It is hacky and unsuggested.
You can get a DOM element in your browser console on creating a tooltip by setting tooltip attribute of the element, on which you want to see tooltip. I copied that DOM element and pasted it in my html, exactly where it was in DOM and removed the previously used tooltip attribute. It worked for me and gave me much more flexibility with the tooltip. You would have to remove some attributes and do some other minor changes.

Using Faizan's code and responding to T3db0t's concerns about flickering, I found that sticking in a non-breaking space, adding visibility: hidden to the css, and closing the proxy element tag reduced the flickering.
Basically speaking:
<i> </i>
With css:
.area-tooltip {
position: absolute;
visibility: hidden;
}
See my pen: https://codepen.io/Larhanya/pen/VMjZBz
(code tweaked for an image map since that's what I needed)
Truncated HTML from the pen:
<img src="http://lorempixel.com/output/food-q-c-350-350-5.jpg" usemap="#foodmap">
<map id="#foodmap" name="foodmap">
<area class="area" shape="poly" coords="78,133,158,182,162,349,0,349,0,283" href="#" target="_self" style="outline:none;" TooltipBackround="black" TooltipId="area-tooltip4" />
<i id="area-tooltip4" class="area-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" title="Pepper" data-animation="false" data-trigger="manual"> </i>
</map>

show Loading effect in jquery UI tooltip

I have tooltip which is being displayed on hover of a image,
The content of tooltip is the larger version hovered image..
Problem: The image in tooltip loads slowly.. How can I display loader until image doesn't loads in Tootip?
<img id="small-img" title= "<img id='big-img' src=<?=getResizedImage(imageId, 500);?>>" src="<?= getResizedImage(imageId, 150); ?>" />

I would wrap the image with a container and add a background-image for the `container.
If I understood right your img-big will be shown in tooltip?

I solved the issue by moving the contents of 'title' to other DIV ('tooltip-contents')..
Below is my fix which shows a div inside tooltip.
//Image to be hovered to show Tooltip
<img id="small-img" src="<?= getImage(imageId, 150); ?>" />
//Contents to be displayed in Tooltip.
<div id="tooltip-contents" style="display:none;">
<img src='<?= getImage(imageId, 500); ?>'/>
</div>
//Contents of .js
$('#small-img').attr('title', function(){
return $('#tooltip-contents').html();
});
$("#small-img").tooltip({
options : {
content : function() {
return $(this).prop('title');;
}
}
});

Colorbox and Image Resize

I have a gallery where I want the User to Open a Picture with Colorbox. (Then send the Picture with a Mail or Print it etc.)
This Site must be programmed dynamically because it has to work on an IPad too.
Now to the actual Problem:
This div should be shown in the Colorbox:
<div style = "display:none">
<div id="inline" style="height:100%; width:auto">
<img src="#" id="inline_img" style="max-height:90%; max-width:100%"/>
<div id="buttons">
<button > test </button>
<button > test1 </button>
<button > test2 </button>
</div>
</div>
</div>
And this is the Javascripit function where the div opens up in the colorbox.
$(function(){
//$('.element a').colorbox({});
$('.element a').click(function(){
// Using a selector:
$('#inline_img').attr('src',$(this).find("img").attr('src'));
$.fn.colorbox({
inline:true,
href:"#inline",
maxHeight:'90%',
maxWidth:'90%'
});
return false;
});
$('.element a').colorbox({
onComplete : function() {
$(this).colorbox.resize();
}
});
But the Colorbox always is much bigger than the Picture itself. The Colorbox must be as big as the Image and in the center of the screen.

I'm use the following code and resolve problem.
$('.colorBox').colorbox({
scalePhotos: true,
maxWidth: '100%'
});

That result makes sense to me. You gave colorbox a display:block element with no defined width and asked it to estimate the size, which of course will be 100% of the available width.