Developing a plugin for Chrome, I've used data-tooltip for links which require a tooltip. Until 2-3 days ago, everything seemed to be working fine.
Today I've discovered that the tooltip for links inside a modal display behind the modal. Nothing has changed in my code. I even tested with older versions of my app ant it still displays the tooltips behind the modal.
My guess is that Chrome has changed the way it views tooltips. Any idea what I can do to fix it?
Example of tooltip usage:
<div class="choose-platform" data-tooltip="GoogleDrive">
...
</div>
Screenshot of the error I'm facing
On hover of Google Drive Icon, the tooltip appears behind modal
It seems like tooltip is appended in body. Try giving higher z-index than modal box
Related
On our webpage some links can not be opened anymore. When hovered, the correct URL is shown in the little preview box in the bottom left corner. But when clicking the hyperlink, nothing happens. Strangely it works on mobile view.
Only the hyperlinks with the link text "Weiterlesen >>" seem to not work.
Any suggestions?
Link to the page
Link to answer - How to fix problem with clicking event on bxSlider item in Chrome 73?
There is a bug with bxSlider in chrome. You should set touchEnabled: false in order to use clickable links without your slider.
I am using Bootstrap glyphicons and FontAwesome icons and am experiencing a strange bug where they do not show unless hovered over, at which point they are permanently visible. When I reload the page they aren't visible again.
This only happens in Chrome. Safari and Firefox both show the icons normally.
I am running Chrome v33.0.1750 - this has never happened before.
I found some JavaScript code to re draw the page and works for me. I found this on SO somewhere so it's not my code.
$(document).ready(function()
{
var Offset = $('body').offset();
$('body').offset(Offset);
});
I just figured it out. Turns out there's a conflict with one the jQuery plugins, holder.js - the image placeholder plugin. Removed that and the icons show fine now on reload.
Strange, considering that in Bootstrap's documentation, they use holder.js to generate images for their 'Thumbnails' section.
UPDATE:
It seems there is a conflict between Chrome 33 and any version of holder.js above v1.9.
https://github.com/imsky/holder/issues/81?codekitCB=415695904.557899
I'm trying to use Chrome developer tools to inspect elements in a page that contains a Nivo-Slider.
The focus repeatedly keeps on jumping to the slider which is very annoying.
Is there a way to avoid this without changing the production code (maybe calling a function on the page)?
You can reproduce the issue here, if you're using Chrome. Open the page, right-click any element (not the slider) and select 'Inspect Element' then when the slider switches, the focus moves to the slider. Very annoying if you want to inspect other elements in the page especially if they're far from the slider.
Try calling the stop method of the Nivo Slider plugin from the browser console like this jQuery('#slider').data('nivoslider').stop(). Replace '#slider' in the jQuery constructor with the id of the element on your page that the plugin is bound to. For example, on the demo page running jQuery('#nivoslider-156').data('nivoslider').stop() from the console should stop the Nivo Slider from animating.
I'm creating a simple bootstrap 2.3.2 popover on my page and it works perfectly on Chrome and Firefox, but when it comes to IE, the popover style is not showed correctly:
IE screenshot
Here is my code:
(ver detalle)
<div id="popoverContent" class="hide">
<p>110001</p>
</div>
Javascript:
$("#pop").popover({
content: $('#popoverContent').html(),
title: "Detalle"
});
The problem was that internet explorer was running the page in compatibility view mode wich was enabled by default for intranet websites. I solved it by pressing Alt key to show the menu bar and going to Tools>Compatibility View Settings, and unchecking the "Display intranet sites in compatibility view."
You had a pretty simple fix, but if you are using a popover and filling in the title you should be sure that you are not emptying it back out. I know we are using bs tooltips, and I used the popover for some d3.js stuff. Well in Chrome I was getting a popover and tooltip, so I emptied the attribute "title" out. That caused IE to freeze on hover. So I had to check if it was IE and not remove the title. It is a mess, but if someone else is having this issue you are not going to see this one coming.
Here is a jsfiddle which works: http://jsfiddle.net/n52ES/
It is how I have it set up on my website. However, if you notice on my website, only the 'subscribe' link in the footer (bottom center) works with the fade in transition on hover and the other links above it (i.e. google+, twitter) don't work. The same for the links at the very top right of the website in the navigation. I noticed this only happens in Chrome.
Does anyone have an idea as to why it only works for the 'subscribe' link? I'm lost.
The current version of Chrome stable has a bug that prevents it from animating visited links: http://code.google.com/p/chromium/issues/detail?id=101245 (this is why you are able to see it, but other people won't unless they actually click and go back to your website).
I'd just wait for it to be fixed.