I need to remove the tooltip from the button.
I'm using Angular/Electron for a desktop application.
I have the following code in the .html file:
<button class="close-button" (click)='closeDialog()'>
<mat-icon class="svg-mat-icon" svgIcon="menu_cancel"></mat-icon>
</button>
This is the 'X' button in the upper-right corner of the screen. When I hover the mouse over it I get a tooltip "menu_Cancel" above it.
How can I remove that tooltip? The button is self-explanatory, and the user does not need to know the filename used.
Thanks.
I had the same problem. I resolved it doing it in my SCSS :
mat-icon {
svg {
pointer-events: none;
}
}
Related
<a routerLink="/dashboard">Dashboard</a> can i remove hyperlink ?
when i use
<button routerLink="/dashboard">Dashboard</button>
it works like what i want
but i want to add routerLinkOptions and it shows button error!
my aim is to remove hyperlink from screeen when hovering on link
In your component.css file, add the following CSS class,
.anchor-style {
text-decoration: none !important;
cursor: default !important;
}
In your component.html file, add the anchor-style class to your anchor HTML element.
<a class="anchor-style" routerLink="/dashboard">Dashboard</a>
If this does not answer to your query, you can try the following,
Apply the RouterLinkActive to an ancestor of a RouterLink.
<div routerLinkActive="active-link-styles" [routerLinkActiveOptions]="{exact: true}">
<button routerLink="/dashboard">Dashboard</button>
<button routerLink="/home">Home</button>
</div>
This will set the active-link-styles class on the div tag if the url is either '/dashboard' or '/home'.
You can call a function on the click event. Which in turns navigates to the desired screen.
In component.html file,
<button (click)="navigateToDashboard()">Dashboard</button>
In component.ts file, navigateToDashboard() { this.router.navigate(['/dashboard']) }
I am trying to use one of the 'checkbox hacks' in which an accordion opens or closes when the user clicks on a label that toggles a checkbox.
The issue is that the webpage I am working on does not use labels, but rather h4 elements. So the user would be clicking on the h4 element to open/close the accordion. As far as I know, making this work directly is not possible. Or is it? I thought that maybe I could overlay an empty label over this h4 element, so that the user would be clicking on the label. Is that possible? Or is making a javascript accordion the only option here?
Here's a suggestion how to do it:
<body>
<!-- Add cursor : pointer to show the user he can click -->
<h1 onClick="myFunc()" style="cursor: pointer;">test</h1>
<script>
// Do something here
function myFunc(){
console.log("title clicked")
}
</script>
</body>
NOTE: I am using Angular, so if Angular can solve this it will also work
I want to build a page where I can view the styles I am making. Therefore I need to somehow activate the hover and active states. Here is my code now:
.myclass {
background-color: blue
}
.myclass:disabled {
background-color: red
}
.myclass:hover {
background-color: green
}
.myclass:active {
background-color: pink
}
<button class="myclass" disabled="true">Disabled</button>
<button class="myclass">Normal</button>
<button class="myclass">Hover</button>
<button class="myclass">Active</button>
I am hoping for something like this:
<button class="myclass" disabled="true">Disabled</button>
<button class="myclass">Normal</button>
<button class="myclass hover">Hover</button>
<button class="myclass active">Active</button>
Or:
<button class="myclass" disabled="true">Disabled</button>
<button class="myclass">Normal</button>
<button class="myclass" hover="true">Hover</button>
<button class="myclass" active="true">Active</button>
This can be done easily, just right click on the element -> inspect element -> navigate to the class (myClass in your case) in styles tab.
Then click on :hov and activate the hover, focus or active (refer to the image attached)
If this is for testing purposes use a dedicated hover en active class.
Give the buttons some dummy classes and style the buttons
When you are finished copy the style to the :hover and :active state
and delete the dummy code.
There is no other solution. If there is one than I also want to know what that solution is.
The answer of Divesh Panwar is the way to go.
For development:
Just introduce a new css class that does what you need.
just do
myclass.hover in css then <button class="myclass hover" disabled="true">Disabled</button> and switch back to :hover when finished styling or whatever.
If you use chrome f.E. you can press F12 to open developer console.
There you can toggle the hover state in the top right.
There
For testing:
If it's for some kind of automated tests, and you realy need the hover state, i gues you approach the problem from the wrong side, use a selenium or similar to guide you in the right direction.
Im trying to make the icon im using into a button that when pressed, triggers the navigation bar to open. Here is the HTML:
<div id="fixedBar">
<h1>Company</h1>
</div>
The class is the icon image and the id triggers the nav bar. The problem is that when I click the icon, the page scrolls back to the top due to the href of '#'.
Im not sure how I can get the icon to not link to anything when clicked.
Thanks!
a href is not needed just use a fake link class
<span class="fake-link" id="fake-link-1"> fake link</span>
.fake-link {
color: blue;
text-decoration: underline;
cursor: pointer;
}
You can remove the href attribute on your a , which is valid in HTML5. This will turn your link into a placeholder hyperlink.
If you're using Javascript in your application, you can set an event handler for the click, and use the preventDefault() method.
Code example with jQuery :
$('a').on('click', function(e){
e.preventDefault();
});
I have something like this:
http://jsfiddle.net/D2RLR/5649/
And it works fine for checking checkboxes from a dropdown menu in bootstrap. But the problem is that this segment of code:
<a href="#">
<input type="checkbox">
<span class="lbl"> Every day</span>
</a>
Will cause the page to reload if someone clicks on the text in the label ('Every day').
I don't want the reload behavior. I tried to change the anchor to a span tag, but it loses the style of onhover, highlighting the entire row together. Also tried to take out the '#' from the anchor and simply make it:
<a href=''>
but the checkboxes don't seem to be responsive to clicks.
Does anyone have any good solution to this?
To your dropdown-menu add the class dropdown-with-checkbox (or another more qualifying class name)
then add the following script:
$(function(){
$('.dropdown-with-checkbox a').click(function(e) {
// ?: Are we clicking a checkbox inside the a-tag?
if(e.target.type === 'checkbox') {
// Yes, but we do not want to prevent the default checkbox behaviour
return;
}
// Do not reload the page when clicking the a tag
e.preventDefault();
})
});
Sidenote 1:
Adding e.stopPropagation(); in the click handler will prevent clicks from propegating up to the 'dropdown' handler, closing the dropdown on click.
Sidenote 2:
You should also structure your checkboxes like this:
<label>
<input type="checkbox"> Label
</label>
This way, clicking the lable will toggle the checkbox.
You could also go with the span approach and create a css class which changes the cursor on mouse over.
.pointer {
cursor: pointer;
}
That way you keep the mouse over effect but don't have to worry about it linking somewhere or reloading the page.