For my app, I use the Webix with the 'web' skin. I'm trying to customize the button's background when the button is:
hovered
clicked (when the mouse button still pressed)
just focused
I use the corresponding CSS-slectors:
.mouseover button:active {
background:#d7dff7;
border-color:#d7dff7;
}
.mouseover button:focus{
background:#e2d7f7;
border-color:#e2d7f7;
}
.mouseover button:hover{
background:#c2cae0;
border-color:#c2cae0;
}
The only thing I cannot reach is the active selector. In the below sample, try to click on any button and you'll see the default gray background:
http://webix.com/snippet/a5687eff
I thought it should be the class of the clicked button, but it's not working and I'm stuck with this. Any help is appreciated.
The css selector ".webixtype_base:active" has "background: #dedede!important;" in webix.css. That is why your background style for ".mouseover button:active" is being overridden.
You simply have to add "!important" so that your background style can take precedence.
See here: http://webix.com/snippet/1ee67de2
I use Bootstrap in my Rails app, in it I have a navbar that contains some elements. When I press one of these elements I present a modal popup. When I close this popup, the clicked element for some reason gets highlighted. This isn't the experience I'm looking for.
See image below:
I wonder how I can get rid of this unwanted effect?
Without you supplying us with a Fiddle, it is very hard for us to determine what is going on exactly.
Although, from your image, it seems as if it is just 'focus'. Below is an image from the Bootstrap website, and it features one of their 'default' buttons. On the left is the button in its original state, and on the right is the button after I have clicked on it and it is in 'focus'. Chrome, by default (created by their 'user agent stylesheet') places this light blue border around elements once they are focused.
To remove the border for all fields you can use the following:
*:focus {
outline: none;
}
To remove the border for selected fields just apply this class to the input fields you want:
.nohighlight:focus {
outline:none;
}
*:focus
{
outline: none;
}
this is work like a charm
I have a default JQuery UI tooltip function call on my page. Is there a way to style the tooltip div interactively using the Inspector? If I had two mouse pointers, one would be hovering over an element to keep the tooltip displayed and second would be using the Inspector and build the style. But I only have one mouse and as soon as it moves off the element, the tooltip disappears. Checking the ":hover" state in Inspector doesn't help. the tooltip disappears on mouse out.
I am using Chrome, but any trick in any browser would do.
My working solution in Firefox:
1. hover over tooltip (tooltip is shown)
2. hit CMD-Option-K (OSX) or CTRL-Shift-K (Windows), to open "Web Console"
3. type "debugger" (this will stop JS execution, so tooltip won't disappear)
4. open "Inspector" Tab, search for .ui-tooltip
5. edit as necessary. note: changes to CSS will work immediately, even if execution of JavaScript is stopped
I found a workaround how to temporary inspect it :
just implement hide settings where you hookup the tooltip logic:
hide: {
effect: "slideDown",
delay: 20000
}
This gives you 20 sec time to inspect it. If you need more time then increase the "delay" attribute.
Here is my working code for page jquery tooltips:
$(function() {
$(document).tooltip({
tooltipClass: "jqueryTooltip",
content: function() {
return $(this).attr('title');
},
hide: {
effect: "slideDown",
delay: 20000
}
});
});
After you are done with the inspection just remove the delay and you are done.
Note: I am using custom class "jqueryTooltip" to style the tooltip after inspection.
In Chrome follow the following steps:
1- Open Developers Tools ( Ctrl + Shift + I ) or (right click on screen and select inspect).
2- Choose Sources:
3- On the right side, you found accordion, Open "Event Listener Breakpoints"
4- You will found all events, Open "Mouse", then Select "mouseout" event, this will stop execution of code and stop before "mouseout action".
5- Go to App screen, and Try to hover only the item which has the tooltip, then screen will freeze, and you will found the tooltip stand as you want.
Note: If you hovered other item by wrong, you can resume the execution of code by clicking resume (blue button), and then try hover again.
If you want to return to the normal execution of code, Deselect the "mouseout" event, and click resume (blue button).
In Firefox the same, the difference in "Sources" tab is named "Debugger".
I'm late to the party, but there is actually a simple way to accomplish this.
In your browser's dev console, use jQuery to target the tooltip as follows:
$('.selector').tooltip('open');
In my case, for instance, I have a class .grey-tooltip on my tooltip, so I call $('.grey-tooltip').tooltip('open');. This should open the tooltips and you can then inspect them as you would any other visible element.
Different methods you can use one tooltips are described in their docs here: https://api.jqueryui.com/tooltip/.
the easy way is to pause js with F8 when tooltip is shown
It should be possible to modify the CSS such that the tool tip is always visible as opposed to on hover only, at which point you could tweak the div's styling via the inspector and see how it's affected real-time.
If you open the developer tools in the newest Google Chrome you should see the elements tab is selected. On the element you have to hover on you just right click on it and open the 'Force element state' menu to select the :hover option.
You can't change a jQuery tooltip's styling in a browser's inspector, because as you are saying it is removed from the DOM on mouseout.
However, with the following code this is what I did to change to change the styling:
$("#myElement").attr({
title: "my tooltip text"
}).tooltip();
$("#myElement").tooltip({
// the .tooltip class is applied by default anyway
tooltipClass: "tooltip"
});
Type debugger; in the JavaScript, before the previous code
In Firefox, hit F12 to open Firebug (download it if you don't have it)
Select the Script tab and click Reload
Now that the debugger is activated, highlight
$("#myElement").tooltip from the 2nd code block (without the parentheses), right-click the highlighted text, and
select Add Watch
Under the Watch tab in the right window, click on +
next to $("#myElement").tooltip to expand all the properties
Under that expand Constructor, then DEFAULTS, and then
template to see the HTML that the tooltip is made of
This is then the exposed HTML structure of a jQuery tooltip:
<div class="tooltip">
<div class="tooltip-arrow"> ... </div>
<div class="tooltip-inner"> ... </div>
</div>
...and now you can apply CSS, something like this:
.tooltip {
background-color: blue;
border: 2px solid black;
border-radius: 5px;
}
.tooltip-arrow {
/* hackery, placing the arrow where it should be: */
margin-bottom: -7px;
}
.tooltip-inner {
/* hackery, making all browsers render the width correctly: */
width: 300px;
min-width: 300px;
max-width: 300px;
/* hackery, removing some unknown applied background: */
background: none;
background-color: none;
color: white;
text-align: center;
}
All the "hackery" mentioned in the CSS above is what I had to do to get Bootstrap to play nicely with jQuery (they both have a tooltip, which can conflict with each other -- see https://stackoverflow.com/a/19247955 for more info).
Here is what I did:
jQuery(".myDiv").attr("title", 'Hello');
jQuery(".myDiv").tooltip({close: function( event, ui ) {
console.log(jQuery(ui.tooltip[0]).html());
}});
And the console content was:
<div class="ui-tooltip-content">Hello</div>
Also, I placed a breakpoint on the console.log function and then examined the page structure before the </body> end tag, and there was something more:
<div id="ui-tooltip-0" role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" style="position: relative; top: -463.60003662109375px; left: 1px; display: block; opacity: 1;"><div class="ui-tooltip-content">Hello</div></div>
It was possible to change the tooltip styling on the fly using Inspector (tested in Chrome).
I copy pasted the code from http://jqueryui.com/demos/slider/range.html for local testing. And what I see is different from what the url shows. When I click the slider "big dots" (used to change the value) the dot image gets a dotted border around it and it doesn't go away after I release the click until I focus another element on the page.
Here's how it looks in my local test (using Vader theme makes it easy to see):
Why this doesn't happen on the example from jQueryUI demos?
It's because it is a link in firefox, which displays a border by default on all links. Use this in your css.
a { outline: none; }
button::-moz-focus-inner { border: 0; }
Edit: it is a link, so I updated the css accordingly.
Go to this beta of my new website (link redacted). If you hover over one of the colored squares, a popup box à la Panic's Coda pops up, except there are two problems:
a) The text inside the popup does not show up. It is programmatically set to :) using the following code:
http://grab.by/syM http://grab.by/syM
$('td.middle', this).text(':)');
td.middle is the class of the middle cell
this is a reference to $('.info').each()
Use may want to use an inspector tool like Firebug for Firefox or the one included one in Safari or Google Chrome.
b) The sides are clipped off:
http://grab.by/syE http://grab.by/syE
I think it is due to this:
http://grab.by/syW http://grab.by/syW
For some reason, the sides have computed widths of 1px, as opposed to
.bubbleInfo .popup td.corner {
position: inherit;
height: 15px;
width: 19px;
}
19px as defined in (link redacted)
You can grab a ZIP archive of all the files here (link redacted).
Thanks so much. I know this is a lot to ask.
The width of the container div for the :) table is clipping the sides of the :) table popup. If you edit the width of the .info class up from 32 to something bigger (I did width:80px) you see the whole popup. Alternately, you can change the width (or min-width) of .popup to about 50px, which fixes them without distorting the size of the colored boxes.
As for the :) being missing, I was able to make it appear by setting text-indent:0 in the .middle class. This had no ill effects on FireFox and fixed it in Chrome.