We Keep Coding

Salesforce - Display hover text when hovering on the standard lightning button that is disabled

Salesforce -
I have a standard lightning button on the salesforce page. There are some conditions to show the button and to disable it. When the condition doesn't satisfy then I need to disable the button and when we hover on that disabled button, we should be able to see some text. I am using lightning web components.
HTML:
<template if:true={disableButton}>
<lightning-button icon-name="utility:custom_apps" label="button" icon-position="left"
onClick={doSomething} title="button is disabled" disabled></lightning-button>
</template>
Js code:
if (conditionNotSatisfied=== true){
this.disableButton = true;
}
The functionality of disabling the button is working but when I hover over the disabled button, the text is not displayed.
Can someone help me with a suggestion on how to display the text on the disable button when I hover on it?

You won't be able to achieve this with the lightning-button LWC component, however Salesforce does have some great documentation on their Lightning Design system, so with a little bit more code, we are able to accomplish what you are asking for.
YourComponent.html
<span class="tooltip">
<button class="slds-button slds-button_neutral" disabled={disableButton} onClick={doSomething}>Neutral Button</button>
<span class="tooltiptext">Tooltip text</span>
</span>
YourComponent.css
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
Here is an image of the above code that I just ran in my own project. When I hover over the button now, I get a little popup on the side. This of course can be styled to your liking.
Sources:
Salesforce Lightning Design System (Buttons)
W3 Schools CSS Tooltip

I know this is post old, but I just found it while trying to achieve the same and here's my solution with the less customization I found
So I have my lightning-button
<lightning-button
type="submit"
label="Unlink Dev Ticket"
onclick={handleButtonClick}
disabled={isButtonDisabled}
title={disabledHelpText}
class="tooltip"
></lightning-button>
Dynamically setting the isButtonDisabled and disabledHelpText in the controller. And make sure you clear the disabledHelpText when the button is enabled
And then, for this to work, you also need to fix the pointer-events to visible. Because it's set to none on disabled buttons. Need to override it on the lightning button
So for the tooltip css class:
.tooltip {
pointer-events: visible!important;
}
And that's how it looks like
I hope this will help other members in the future

How to disable the cursor but not only visually? [duplicate]

This question already has answers here:
How to completely DISABLE any MOUSE CLICK
(5 answers)
Closed 5 years ago.
I want to hide the cursor until my function is done but I can't find how to disable it. I mean I have found how to hide it and show it but when it's hidden I can still click So how to disable it?
window.document.styleSheets[0].insertRule('* {cursor: none;}', window.document.styleSheets[0].cssRules.length);
Meteor.call("lockTheMachine", machine.nameMachine, Session.get("loggedUser"), function(err, res) {
if (!err) {
Session.set("lastMachineUsed", machine.nameMachine);
window.document.styleSheets[0].insertRule('* {cursor: default ;}', window.document.styleSheets[0].cssRules.length);
} else {
console.error(err);
}
});
}

There's a CSS property for that called pointer-events.
The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.
In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.
If you were to disable any click interaction on your whole site you could simply add:
body.block { pointer-events: none; }
And trigger the class .block programatically via Javascript.

You can solve your problem by simply adding the following style in your CSS file.
button {
pointer-events: none;
}
The problem with this is that the button is not clickable but the cursor is still displayed when you hover on the button.
To overcome this problem you can add "disable" attribute to the button and add the following CSS.
button {
cursor: not-allowed; // or cursor: none;
}
When you add the css "cursor": "not-allowed" or "none" to a input type or a button, the button is still clickable. For doing the input type or button non clickable you have to add "disable" attribute.
A disabled input element is unusable and un-clickable. The disabled attribute can be set to keep a user from using the element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the element usable.
But when you using bootstarp library, when you disabled a button or input type, then you can't see any cursor when hover onto that element. At the newest bootstrap library, we can find this rule:
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
So I assume that bootstrap tried to implement the cursor: not-allowed for disabled buttons, or input's.
So for doing this you have to overwrite the bootstrap class for it.
But it works fine when you don't link bootstrap library in your html.
e.g.:
HTML code:
<button class="disabled-button" disabled>
I am disabled and not clickable too
</button>
CSS code:
.disabled-button {
cursor: not-allowed;
}
or you can trigger ".disabled-button" class programmetically by javascript to unclickable it.

CSS selector for :hover plus no mouse-button pressed?

I am currently using :hoverCSS pseudo-class for displaying tooltip-like elements (i.e. tables) in a way similar to what is suggested here:
div.tool:hover div.tooltip { display:block; }
I like the fact that this does not require any JavaScript.
Is it possible to add a further constraint to the effect that the hover only applies if no mouse button is pressed? The reason is that I want to prevent interference of these tooltips with other functionality (drag-and-drop, drop-down menus) that is based on jQuery UI. (As it happens, the tooltips are currently dragged together with their corresponding "tool" elements.)

Basically the if mouse clicked css selector method id :active so what you would have to do is this:
.tool {
min-height: 18px;
height: auto;
}
.tool:active .tooltip {
display: none !important;
}
.tool:hover .tooltip {
display: block;
}
.tooltip {
display: none;
}
The order is crucial because the higher rules take priority
Here is a working fiddle: http://jsfiddle.net/Hive7/bsnnb6sf/
Also you might want to consider using visibility instead of display because otherwise you need to set the height of the parent:
.tool:active .tooltip {
visibility: hidden !important;
}
.tool:hover .tooltip {
visibility: visible;
}
.tooltip {
visibility: hidden;
}
Example fiddle: http://jsfiddle.net/Hive7/bsnnb6sf/1/

Is it possible to add a further constraint to the effect that the
hover only applies if no mouse button is pressed?
One option could be to use :active pseudo-class to hide the tooltip. According to the spec: (my emphasis)
5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus
The :active pseudo-class applies while an element is being activated
by the user. For example, between the times the user presses the mouse
button and releases it.
For instance:
div.tool:hover div.tooltip { display:block; }
div.tool:active div.tooltip { display:none; }

I think that's not possible because the hover event will always launch before the click event. If you want to disable that effect once the user clicks the element, you could add custom style rules to the css in the click event overriding the hover rules via element.addClass() or element.css()

Easiest way to make disabled button look disabled with jQuery

When I use .prop('disabled',true) to disable a button, it works, but the button does not look disabled. I remember in the old days when I used .attr('disabled','disabled') to disable buttons, they would become more visibly disabled, i.e. the text would be greyed out or something so the user wouldn't try to click. Now I think the button border fades a bit but the text is not.
What's the easiest way to get the old behavior back? I am lazy and don't want to write one line of code to disable the button and another to make it look disabled - I want to get both effects in a single command if possible. Should I use a different element other than a button? A different method of disabling?
I made a fiddle here: http://jsfiddle.net/ak2MG/. Here's the code.
HTML:
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
Javascript:
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true); } );

Or change the opacity of the button
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).css('opacity',0.5);
});
Fiddle

I would add a disabled class to the button.
This lets you control the styling from CSS instead of javascript so all of your styling is in one place (where it should be).
Demo: JSFiddle
HTML
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
JS
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).addClass('disabled');
});
CSS
.disabled {
color: #999;
}

it is pretty simple, just change the text style
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
my_button_disable(this);
});
function my_button_disable(btn) {
$(btn).prop('disabled',true);
$(btn).css('color', 'lightgray');
// put whatever else you want here
}
http://jsfiddle.net/ak2MG/6/

Simplest - Add a state in CSS
Target it with CSS to change the style,
importantly the pointer-events: none will make it unresponsive. :
button:disabled {
background: #F5F5F5;
color : #C3C3C3;
cursor:none;
pointer-events: none;
}

The change from attr() to prop() was only to the jQuery API and has nothing to do with any difference you are observing in the style of a disabled button.
A disabled button's style is decided by the browser. The fiddle you provided looks very "disabled" in Google Chrome (Version 33.0.1750.154 m). If you'd like to alter the style of a disabled button to your liking, I recommend adding a class OR styling based on attribute
button[disabled],
button.disabled {
color: #999;
background: #DDD;
border: 1px solid #CCC;
}

Webkit scrollbar dynamic styling

I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?

There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/

Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript

If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.

i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image

For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.

You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip

you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.

you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/