Tooltip not coming on bottom - javascript

I made a navbar and there is a green button. When the cursor hovers on it, I want a tooltip (at the bottom) to appear. However that is not happening. I used the following script:
$("[data-toggle="tooltip"]").tooltip();
A very strange thing happens. The tooltip is getting hidden underneath the navbar. Or so it seems. Can anybody help me with this? The following is the HTML code for the button (it is enclosed within the header tag):
<a id="ID" style="margin-right: 20px" class="btn btn-success"
data-placement="bottom" data-toggle="tooltip" href="#"
data-original-title="Tooltip on bottom">Has hover state</a>

Fix your JavaScript quotes:
$("a[data-toggle='tooltip']").tooltip();
See this Plunker as reference, it has your markup and the fixed JavaScript.
Note that the .tooltip() is running after the DOM is ready with the relevant markup.
EDIT: After a long discussion in the comments, the solution was to add this to the CSS:
.tooltip{ position: fixed;}

Related

Popover scrolls and some content is hidden when called within a .sticky-top element

So, using Bootstrap 4, I have a navigation bar that is set to .sticky-top. There's a button that calls a popover, which works great until the page is scrolled a little, then the top part of the popover content gets hidden.
This wouldn't be too bad if it only happened upon scrolling. The real issue is that if the popover is opened AFTER scrolling, the contents are still hidden.
Here's a Fiddle showing the problem:
https://jsfiddle.net/vfpb7r2d/16/
And the most relevant bit of code:
<div class="sticky-top bg-dark p-2">
<div class="btn btn-primary" data-toggle="popover" title="More information..." data-content="Isn't there a way to keep the whole popover visible??? The longer the popover content becomes, the more of the content disappears with scrolling. (There does seem to be a maximum cutoff point, but I haven't tried to measure what it is.)" />Button</div>
</div>
Is there any way to fix this?
Add data-boundary="viewport" to the popover element.
<div class="btn btn-primary" data-toggle="popover" data-boundary="viewport" title="More information..." data-content="Isn't there a way to keep the whole popover visible?">Button</div>
https://jsfiddle.net/vfpb7r2d/22/

Making the popup from bootstrap stay within the screen

I am creating popups with popover bootstrap option in creating an interactive html. I first used the following tag:
<a class="btn popoverOption"
data-content="A group of people with a shared characteristic. It is an object of observation in epidemiological studies."
data-original-title="cohort"
data-placement="bottom"
href="#"
rel="popover"
style="font-size: inherit; vertical-align: baseline; padding: 0; font: inherit;">
cohort
</a>
I have purposely made spces to show the syntax. The popup is below the text, so I tried adding data-container='body', but in this way when I zoom in the popup is frequently outside the screen. How can I make the popup always stay within my screen (without fixing the size in any way, if possible)?
Thanks in advance! Please tel me if I need to show more code, I didn't do it for brevity.

Bootstrap Popover - Images appearing in wrong position until 2nd click

I have a number of buttons on my page that when clicked should display content inside a Bootstrap Popover. The content is loaded from my Database and can be either text or an image which can vary in size.I have implemented a solution which is working correctly in IE however in Chrome and Firefox my popover is opening half way down the page when you first click the button. On the second click of the same button the image will then appear in the correct position with no issue just like in IE. If the content of the popover is text then it is displayed correct first time in all browsers but the issue appears for images in Chrome and Firefox. I have researched this but I cannot find anything that has helped it to work across all browsers. Any help would be great.
HTML
<button type="button" class="btn btn-default btn-xs" data-toggle="popover" data-container="body" data-content="#item.Content">#item.Title</button>
JS
$(document).ready(function () {
$('[data-toggle="popover"]').popover({
html: "true",
placement: "top",
});
});
CSS
popover{
width:auto!important;
max-width: none;
}
I believe the issue (at least this was the case for me) was one of caching. The button is clicked, the popover loads its content, the <img /> tag is added to the DOM and begins a fetch, the popover renders, and the fetch completes and is blitted to the screen.
The best solution I've found is to preload/the image. There are two ways you can do this. If you know your image url ahead of time, you can add a preload link. Alternatively, you can place the popover content that includes the image tags in a <div class="d-none">...</div> (or class="hidden" if you're using bootstrap 3).
<html>
<head>
<!-- case where image urls are known ahead of time -->
<link rel="preload" as="image" href="my-image.png" />
</head>
<body>
<!--
case where image urls are NOT known ahead of time
NOTE: #item.Content should not include <script> tags or the code will be run twice
-->
<div class="d-none">
#item.Content
</div>
<button type="button" class="btn btn-default btn-xs" data-toggle="popover"
data-container="body" data-content="#item.Content">
#item.Title
</button>
<script>
$(document).ready(() =>
$('[data-toggle="popover"]').popover({
html: "true",
placement: "top",
});
});
</script>
</body>
</html>
For anyone who may come across the same issue as this I have the found adding the line - trigger: 'hover', to the script allowed images to be loaded in the correct position on each browser.

Can't click on button after declaring z-index?

I am unable to click on button after giving z-index to it. It's overlapping on my side navigation bar I don't know why, any suggestions would be great:) .
How can I make it clickable even after z-index=-1
MY CODE :
<div class="col-lg-1 col-lg-offset-0 col-xs-4" >
<span class="glyphicon glyphicon-heart" id="lovehate" style="left:17px; top:20px;" ></span>
<a href="{{route('lovebutton',['username' => $user->username,'action'=>'love']) }}" >
<button class="btn btn-md btn-default btn-lg-round waves-effect waves-teal" type="button" style="z-index: -1; " id="lovebtn">Love</button>
</a>
</div>
Since for those element that z-index value has not assigned, it's z-index value is auto. and for as long as you do not post more of your code we are not going to be able to help.
I tried your code you provided here: https://jsfiddle.net/cb16h3jo/ and the button is responsive.
You can inspect you button in your browser and see if any other element is overlaying in your element. If so then change that element z-index to something lower than your button z-indez says: z-index: -2
I guess you have a reason for setting the zindex to -1? is not that your button is not clickable, is that probably something is overlapping it (I've tried the piece of code you posted and I can click on the button).
you could use high values to bring the button to top layer... try
z-index=3
or
z-index=5
or
z-index=9

jQuery show/hide not working

I'm having the strangest problem with jQuery's hide() and show() functions.
The site I'm working on (development build) is here
On the page, you'll see a product under Featured Products called Hydrate. This product has some flavor options so what I want to do is make it so that when the user clicks the Add to Cart button it shows a layer that is by default hidden. See the two screen shots here:
However, when I click the Add To Cart button, the layer does not appear. The Firebug screenshot below shows what the elements look like after I've clicked the Add To Cart button.
Notice that the element style is "display: block" as per the jQuery norm, which then should override the CSS element style for "display: none". I've done this hundreds of times, if not more and this is the first time it hasn't worked. Now look at the Firebug screenshot below. If I click the red slash-circle next to display:none in the debug console, the layer appears exactly as it should.
Below are the snippets of what I believe are relevant code, but I can't see where the problem is.
CSS Code:
.carouselProduct {float:left; border:2px solid #e9e9e9; width:223px; min-height:242px; margin:18px 2px 0 2px; position:relative; overflow:hidden;}
.productOptions{
position:absolute;
bottom:0px;
left:0px;
width:211px;
background: url('../images/black_background_75.png');
z-index:99999;
padding: 6px;
height:170px;
display:none;
}
JS Code:
$(document).ready(function(){
$.noConflict();
jQuery('.add_to_cart_btn').live('click',function(e){
e.preventDefault();
$(this).getForm().sendRequest( 'shop:on_addToCart', {update: {'mini_cart': 'mini:cart'} });
});
jQuery('.choose_options').live('click',function(e){
e.preventDefault();
jQuery('#options_'+jQuery(this).attr('rel')).show();
});
});
Note: I thought maybe there was some way that something was interfering so I implemented noConflict but it didn't make any difference. Also note that I'm not getting ANY JS errors in Firebug.
HTML Code:
<article class="carouselProduct">
<!--productContent starts here-->
<article class="productContent">
<img class='productImage' src="/uploaded/thumbnails/db_file_img_33_autox126.png" style="margin: 3px;">
<hgroup>
<h4>Hydrate</h4>
<h3>$25.00</h3>
<h3 class="orange">$15.00</h3>
</hgroup>
<strong>Key Benefits:</strong>
<ul>
<li>Proper electrolyte balance</li>
<li>Reduce muscle fatigue & cramping</li>
</ul>
</article>
<!--productContent ends here-->
<!--productOptions layer starts here -->
<div class="productOptions" id="options_1">
<div class='selectbox1'>
<label>Flavor</label>
<select class='my-dropdown' name='product_options[4448804864d703e8b696c3fa7713aa23]'>
<option value='Fruit Punch'>Fruit Punch</option>
<option value='Orange'>Orange</option>
</select>
</div><br>
<article class="product_btn">
<a class="yellow_btn" rel="1" title="Add To Cart" href="#" onclick="return $(this).getForm().sendRequest( 'shop:on_addToCart', {update: {'mini_cart': 'mini:cart'},onSuccess: function(){ close_layer(1) } })">Add To Cart</a>
<a class="gray_btn" title="View More" href="#" onclick="close_layer(1)">Cancel</a>
</article>
</div>
<!--productOptions layer ends here -->
<!--product_btn starts here-->
<article class="product_btn">
<a class="yellow_btn choose_options" title="Add To Cart" href="#" rel="1">Add To Cart</a>
<a class="gray_btn" title="View More" href="/shop/product/intensity-hydrate">View More</a>
</article>
<!--product_btn ends here-->
</article>
Note that there are two Add To Cart buttons. Only the last one in the code here (the one that shows up initially) has the "choose_options" class on it. Also, on the Cancel button inside the overlay, I have call to a function called close_layer that passes the id in and then runs the jQuery hide() function which also doesn't work.
I've tried everything I can think of. I've disabled other JS and CSS and still it doesn't work. I've console logged everything and added alerts. It IS running the function because it adds the element display style to the hidden div but something isn't letting it override the CSS file.
Any help would be greatly appreciated.
On your page, there are more than one divs has the same ID - 'options_1'. So your code only change one of them. If you do want to show all of them, then you can do it as below:
jQuery('div[id=options_'+jQuery(this).attr('rel')+']').show();
The issue i feel is being cause by specificity
element.style has higher specificity compared to .productoptions because the property is part of the style attribute
Even if you apply the class to the element element.style will be given preference. .
The better option for you is to Remove the style attribute from your HTML..
Add the display:block inside a class..
.block
{
display : block;
}
<div id="options_1" style="display:block">
should now look like
<div id="options_1" class="block">
Now use .addClass() and .removeClass() to specify your logic.
It seems your DOM is messed up. Perhaps you have a missing tag somewhere or something?
Anyway I visited your page and when I change:
jQuery('#options_'+jQuery(this).attr('rel')).show();
to
jQuery('#options_'+jQuery(this).attr('rel')).show().appendTo(jQuery(this).parent())
everything is fine.
I had a similar problem and after debugging found that I had forced 'display: inline-block !important' in one of the places which was overriding my hide(). Could you check if the !important is used anywhere in the CSS that can be related?

Categories