Bootstrap popover offset on first hover - javascript

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

Related

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>

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>

How make a popup work

I am trying to develop a popup feature when you click on an Image the image opens up as a popup. Here is the example
http://soumghosh.com/otherProjects/natalierosscms/175-2/
Click on the first image and close it. Then click on the second image. The images are repeating. Any ideas what I am doing wrong? For some reason I am not able to post code here.
JavaScript:
$('.alignnone').click(function(){
$('.overlay').appendTo('body');
$('.overlay').show();
var popImage = $('.projectContainer').show();
var thumbHolder = $(this).parent();
thumbHolder.css('position', 'relative');
$(this).clone().appendTo('.projectContainer');
var cssAtrOne = {
padding:'10px',
width:'110%'
};
popImage.appendTo(thumbHolder).css(cssAtrOne);
});
$('.closeButton').click(function(){
$('.overlay').hide();
$('.projectContainer').hide();
});
HTML:
<!-- clickable image -->
<img src="http://soumghosh.com/otherProjects/natalierosscms/wp-content/uploads/2013/03/T1Main.jpg" alt="T1Main" width="559" height="745" class="alignnone size-full wp-image-181">
<!-- popup -->
<div class="projectContainer" style="padding: 10px; width: 110%; display: block;">
<img class="closeButton" src="/otherProjects/natalierosscms/wp-content/themes/twentyeleven/images/closeButton.png">
</div>
You have this:
$(this).clone().appendTo('.projectContainer');
You're appending the image to the projectContainer without clearing the projectContainer first (So images just continue to build up each time). So what you'll need to do is clear out the previous images, then insert the new one.
But inside projectContainer is your close button, which makes things a wee bit tricker. There are many ways to work around this issue, but a straight-forward solution would be to introduce another <div>, imageContainer inside projectContainer:
HTML:
<div class="projectContainer" style="display: none; padding: 10px; width: 110%;">
<img class="closeButton" src="/otherProjects/natalierosscms/wp-content/themes/twentyeleven/images/closeButton.png">
<div class="imageContainer"></div>
</div>
Then modify your JS:
Change JS:
//REPLACE the contents of imageContainer, not append to it.
//$(this).clone().appendTo('.projectContainer');
$('.projectContainer > .imageContainer').html($(this).clone());
Something to that effect should work.

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.

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/

Categories