Bootstrap tooltip CSS changes work in file but not with jQuery - javascript

I'm trying to customize the look of the .tooltip-inner class (from Twitter Bootstrap) and it's working fine when I add it to my CSS file (which overrides Bootstrap.css):
.tooltip-inner {
color: #333;
background-color: #fff;
border: 1px solid #333;
}
Here is where tooltip is used:
<img id="notebookIcon" src="notebook.png" data-placement="bottom" data-toggle="tooltip" title="Apps" />
But when I try this:
$(function(){
//$('#notebookIcon').tooltip(); Uncommenting this doesn't fix
$('.tooltip-inner').css('background-color','#fff');
$('.tooltip-inner').css('color','#333');
$('.tooltip-inner').css({"border-color": '#333',"border-width":"1px","border-style":"solid"});
});
Changes do not appear.
Side Note: The actual class of the tooltip that appears is class="tooltip fade bottom in" (this is observed using Firebug at runtime) but modifying .tooltip-inner CSS seems to work.

The Twitter Bootstrap library adds and removes the tooltip elements when the hover occurs. Even after initializing the tooltips with .tooltip(), no HTML is added to the page...so your immediate calling of .css() on the $(".tooltip-inner") matches no elements. When you hover over the target, Bootstrap adds a <div class="tooltip"> element immediately after the target. When you leave the target, that new element is removed.
CSS is always there and ready to be applied to elements, so it's always applied when the element is added on hover.
The solution would be to bind the mouseenter event to the target and apply the styles then:
$(function () {
$('#notebookIcon').tooltip().on("mouseenter", function () {
var $this = $(this),
tooltip = $this.next(".tooltip");
tooltip.find(".tooltip-inner").css({
backgroundColor: "#fff",
color: "#333",
borderColor: "#333",
borderWidth: "1px",
borderStyle: "solid"
});
});
});
DEMO: http://jsfiddle.net/uDF4N/

Related

How to add hover css style with React.createElement

I'm creating a button with React.createElement:
React.createElement('button', {style: button.key === this.state.customBtnSelected ? customBtnSelected : customBtnUnSelected, onClick: () => {this.handleCustomBtnClick(i)} }, button.label)
So the one of the css styles is in the customBtnUnSelected variable.
But how do I add css classes for the hover state?
So far this isn't working:
const customBtnUnSelected = {
padding: 12,
textAlign: "center",
textDecoration: "none",
display: "inline-block",
fontSize: 12,
cursor: "pointer",
backgroundColor: "#CFD4DA",
border: "1px solid white",
&:hover: {
color: "#fff"
}
};
It's not possible to use the :hover, :after, or :before styling to an element, using inline styling.
The only way to achieve that is to use the <style> tag, or linking an external CSS file to your project.
To insert a style tag, you just place it somewhere in your app. It may be in one of your components, or in the root HTMl file, etc...
return (
<style>{`
.myButton {
padding: 8;
background: black
}
.myButton:hover {
background: grey
}
`}</style>
)
Then, you can just use the myButton class on the className prop of your button.
<button className='myButton'>Click</button>
or
React.createElement('button', {className: 'myButton'})
Regardless of using React.createElement or the JSX syntax, React doesn't support selecting pseudo elements with inline styling.
This question has a few answers with a lot more tips that might help you:
CSS pseudo elements in React

Background color not changing in Chrome when setting css in jquery

In my JQuery/JS I'm doing a check and changing the background color and border color of a button, it works fine in IE but in Chrome, Chrome doesn't set the color back to grey. IE changes, just not Chrome. When I look in the debugger at the rendered html it doesn't add the coloring, it's just not there!!! Funny thing is it adds the disabled property in Chrome, so the line of Jquery code that sets the color back to grey is def being called!
Here is my button, I initialize it with grey and being disabled
<button id="eventRegister" type="button" class="btn btn-lg btn-yb footer-button" style="background-color: grey !important; border-color: grey !important; display: none;" disabled>Register</button>
Then with a checkbox on the page for 'terms and services' I enable it and remove the grey color. But if the user un checks the checkbox and resets the button back to grey, in Chrome, it doesn't change the color. IE is fine!
$("#registerEventTerms").off('change').on('change', function () {
if (this.checked)
$("#eventRegister").css('background-color', '').css('border-color', '').prop('disabled', false);
else
$("#eventRegister").css('background-color', 'grey !important').css('border-color', 'grey !important').prop('disabled', true);
});
FYI - I'm thinking it has something to do with my class 'btn-yb' located in my site.css file, that has these properties, but not sure
.btn-yb {
background-color: #008489 !important;
color: white !important;
}
.btn-yb:hover,
.btn-yb:focus {
color: white !important;
}
.btn-yb.disabled,
[disabled].btn-yb,
fieldset[disabled] .btn-yb {
opacity: 1;
}
Also change your javascript
<script>
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" >
$("#registerEventTerms").off('change').on('change', function() {
if ($(this).prop('checked', true);)
$("#eventRegister").css('background-color', '').css('border-color', '').prop('disabled', false);
else
$("#eventRegister").css('background-color', 'grey !important').css('border-color', 'grey !important').prop('disabled', true);
});
</script>
Change CSS
.btn-yb {
background-color: #008489;
color: white !important;
}
.btn-yb:hover,
.btn-yb:focus {
color: white !important;
}
.btn-yb.disabled,
[disabled].btn-yb,
fieldset[disabled] .btn-yb {
opacity: 1;
}
Things are happening in the following order:
First, your inline style is getting applied, and setting the button's background-color to grey.
Next your stylsheet is setting the background-color to #008489.
Finally, your jQuery is removing the inline style successfully.
It's important to note that jQuery's css() method attempts to modify the style property, and thus it can only update inline styles, not external stylesheets. Your inline style is removed, and your stylesheet rule is not. As such, you see the stylesheet's #008489 background-color.
Remember, inline styles have more specificity than stylesheet styles. This can only be overridden with !important. However, things get much more confusing with multiple !important declarations, as all your rules are essentially fighting for highest specificity. Avoid using !important whenever possible, opting for more specific CSS selectors instead.
The simplest solution to this is to just remove all of your !important declarations, as this will allow the specificity to be handled in the correct order:
$("#registerEventTerms").off('change').on('change', function() {
if (this.checked)
$("#eventRegister").css('background-color', '').prop('disabled', false);
else
$("#eventRegister").css('background-color', 'grey').prop('disabled', true);
});
.btn-yb {
background-color: #008489;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="eventRegister" type="button" class="btn-yb" style="background-color: grey" disabled>Register</button>
Alternatively, you can setup a new selector to target the disabled attribute, which would mean you don't need to worry about setting styles in either HTML or jQuery - all that needs to be handled is the .prop():
$("#registerEventTerms").off('change').on('change', function() {
if (this.checked)
$("#eventRegister").prop('disabled', false);
else
$("#eventRegister").prop('disabled', true);
});
.btn-yb {
background-color: #008489;
color: white;
}
.btn-yb[disabled] {
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="eventRegister" type="button" class="btn-yb" disabled>Register</button>
For a more comprehensive reasoning of exactly why the css() method can modify inline styles but not stylesheet styles, please see this answer I wrote yesterday.
As for why IE is behaving differently than Chrome, I assume it's based on the order of specificity of how multiple !important statements are handled.

CLose Button doesn't appear on magnific-popup

This should be simple .... However....
I've tried almost everything to get the Close (X) Button to appear on the magnific popup. But it doesn't happen. There's no escape from the popup page except for the Back option. Here's what I've got:
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}
and
<div class="popup-modal">
<img src="img/paintings/acrylic-trulkhor-1.png">
</div>
<div id="test-modal" class="mfp-hide white-popup">
<p><button class="closePopup">Close</button></p>
</div>
<script type="text/javascript">
$('.popup-modal').magnificPopup({
type: 'inline',
modal: false,
});
$(document).on('click', '.closePopup', function (e)
{
e.preventDefault();
$.magnificPopup.close();
});
</script>
</div>
Any ideas?
Thanks.
Here is a working example: https://jsfiddle.net/0rd5dc3v/2/
There are a few things I changed:
// Change the html link to the popup id, not the image url
<div class="popup-modal">
<a class="popup-modal-link" href="#test-modal"><img src="img/paintings/acrylic-trulkhor-1.png"></a>
</div>
// Call magnificPopup on the <a> element, not the outer div
$('.popup-modal-link').magnificPopup({
type: 'inline',
// Hide the builtin close button so we can use a custom close button
showCloseBtn: false
});
The button is white in color by default. To make it visible set its CSS property to black or any color that is visible on a white background.
.mfp-close {
color : black;
}
A simple workaround is to include the closeMarkup property in the object you init Magnific Popup with, and adding in a custom class to that markup.
Then, add that named custom class from your markup to your CSS with display set to something other than 'none', and marked !important.
Within the Magnific Popus JS:
closeMarkup:"<button title='%title%' type='button' class='mfp-close myDisplayOverride'>×</button>"
CSS:
.myDisplayOverride{
display:block !important
}
5 years late to the party!
I had the same issue as you did: when inline was set to true, the close button was not there.
You need to add the closeBtnInside: true configuration option in order to make the button visible.
So in your case:
$('.popup-modal').magnificPopup({
type: 'inline',
modal: false,
closeBtnInside: true
});
Just keep in mind that if you have custom markup for you close button, you need to add a tiny bit of CSS magic to make it work on click.
My custom button markup looks like this:
closeMarkup: '<button type="button" class="mfp-close"><i class="far fa-times"></i></button>'
And when you click on the <i class="far"> element, nothing happens.
So you need to add
.mfp-close i {
pointer-events: none;
}
because magnificPopup has the click handler bound to the button element but not its children...

Change div background image, js works in chrome but not ie or firefox?

Basically I want the user to be able to click and change the background, and for there to be multiple backgrounds, for a specific div.
This works perfectly in Google Chrome but not in IE or Firefox.
HTML:
<div id="palette">
<div class="lightblue"></div>
<div class="gold"></div>
<div class="aqua"></div>
</div>
<div id="primary">
</div>
CSS:
#palette {
border: 2px solid white;
width: 25px;
}
#palette div {
height: 25px;
width: 25px;
}
.lightblue {
background: lightblue url(http://www.textureking.com/content/img/stock/big/DSC_4279.JPG);
}
.gold {
background: gold url(http://www.textureking.com/content/img/stock/big/DSC_4287.JPG);
}
.aqua {
background: aqua url(http://www.textureking.com/content/img/stock/big/DSC_4274.JPG);
}
JS:
$(document).ready(function() {
// attach onclick event to your palette colors
$('#palette div').on('click', function() {
// get background of selected palette color
var bg = $(this).css('background');
// change the background of the body
$('#primary').css({ 'background': bg });
});
});
http://jsfiddle.net/KNutQ/1/
It's not showing any errors and other javascripts run, so I'm not really sure what the problem is.
If it's easy to fix please leave an answer, if not I will try it this way: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_backgroundimage
According to the CSS specification getting the computed style of a shorthand should not return anything. You need to list out the individual properties as I've done below.
Perhaps the CSS spec or Chrome will change in the future but at the moment Firefox and IE's behaviour is correct.
$(document).ready(function() {
// attach onclick event to your palette colors
$('#palette div').on('click', function() {
// get background of selected palette color
var backgrounds = $(this).css(['background-color','background-image', 'background-repeat', 'background-attachment', 'background-position']);
// change the background of the body
$('body').css(backgrounds);
});
});

How to change the color of a Bootstrap popover in JavaScript

I have this JS code to bring up a popover:
$('a').popover({content: 'Popover text', title: 'Popover'});
$('a').popover('show');
I would like to change the attributes, for example, I would like the color of the popover to be a light yellow. Is there a way I can do this in the JS code itself? Perhaps in the template option?
You can do this with CSS by using the .popover, .popover-title, and .popover-content classes.
.popover-title{
background: #ffff99;
}
As others have pointed out, the way to change the popover color is to change the CSS of .popover and .popover.right .arrow:after. But since we want this to happen dynamically, we would do:
$('.popover').css('background-color', 'red');
$('.popover.right .arrow:after').css('border-right-color', 'red');
But wait, the second jQuery snippet is not right. You cannot have :after selector because :after is NOT a part of DOM, hence no javascript in this world will be able to catch :after. So I made this CSS.
.popover-danger {
background-color: #d9534f;
border-color: #d43f3a;
color: white;
}
.popover-danger.right .arrow:after {
border-right-color: #d9534f;
}
And whenever I need to change the color of my popover, I write the following jQuery snippet:
$('#selector').next('.popover').addClass('popover-danger');
The #selector is the element on which you have applied the popover. From that element I search the next .popover. This ensures that we are dealing with the popover attached to the current element only. Then we simply add the class so that the :after selector can be applied naturally without JS.
JSFIDDLE DEMO.
Try this code to change background color of the Popover title bar and the full Popover:
$('.popover-title').css("background-color", "#9FC53B");
$('.popover').css("background-color", "red");
javascript:
$('#username').popover({
title: '',
content: 'error!'
});
$('#username').popover('show');
$('.popover').addClass('popover-danger');
html:
<div id="username" class="input-group" data-html="true" data-placement="right">
<span class="input-group-addon width-100 align-right">Username=</span>
<input type="text" class="form-control" title="username" placeholder="Enter username..." v-model='username'/>
</div>
css:
.popover-danger {
background-color: red !important;
border-color: red !important;
color: white !important;
}

Categories