When I apply this example which display a button popover on hover (mouseenter) and hide it when not hovered (mouseleave), the popover display also when the button is clicked, and stay visible until the button is clicked a second time...
<button
type="button"
[popover]="popover"
placement="bottom"
triggers="mouseenter:mouseleave"
class="btn"
[ngClass]="btnClass"
></button>
The code above show the popover under the button when hovered, but also on the top of the button when clicked...
Is this a normal behaviour ?
Ngx-bootrap button don't like when an input is named popover, so replacing this by the following code works:
<button
type="button"
[popover]="anyThingButPopoverNamedVar"
placement="bottom"
triggers="mouseenter:mouseleave"
class="btn"
[ngClass]="btnClass"
></button>
Related
I am using Vuejs 2 and the v-tooltip npm package. I would like to display the v-tooltip only when a button is disabled. When it is not disabled, I don't want to display the v-tooltip at all.
<button
v-tooltip="message"
:disabled="true">
CLICK ME!
</button>
Let say you have a variable disabled in your state, it can be a condition as well a > b, then you can conditionally render the buttons.
<button
v-if="disabled"
v-tooltip="message"
:disabled="true">
CLICK ME!
</button>
<button
v-else
>
CLICK ME!
</button>
Or you can even try this
<button
v-tooltip="disabled ? message : ''"
:disabled="true">
CLICK ME!
</button>
maybe it will work
I've been struggling on preventing the router link when clicked on the button inside it, e.g:
<router-link to="/a">
<div>...</div>
<button #click.prevent="somemethod()"></button>
</router-link>
When i click on the the child button, i don't want router-link to go on the route
You should have a button. I don't see any button text. Add a button text.Then press submit.
<button #click.prevent="somemethod()">SUBMIT</button>
When using https://wave.webaim.org/ to check a page for accessibility It detects (3) red errors. seems this is all coming from colorbox jquery.colorbox.min.js
3x empty button
<button type="button" id="cboxPrevious">
<button type="button" id="cboxNext">
<button id="cboxSlideshow">
How can this be repaired? I know that the button type should be Some Content
Not
I had the same problem as you.. All I did was to disable a plugin called Yith compare..
When I'm using bootstrap 3 modal when I dismiss it the page reloads and /?is added to location string. How can I just dismiss and hide modal without page reload?
Your button that closes the modal will need to have the data-dismiss attribute and it should be equal to "modal"
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
This code is straight from the Bootstrap website (http://getbootstrap.com/javascript/#modals)
I have a list of items in a table and want to enable or disable some buttons based off a boolean property called "enabled". Code for the buttons are as follows
<button class="btn btn-sm btn-primary" show.bind="item.enabled" click.delegate="toggleEnabled()">Disable</button>
<button class="btn btn-sm btn-warning" show.bind="!item.enabled" click.delegate="toggleEnabled()">Enable</button>
No matter what the value for item.enabled, only the disable button shows. Wondering what I am missing?
click.delegate="item.toggleEnabled()" add the item. before toggleEnabled and you'll be good to go!
Here is an example with working code: https://github.com/AshleyGrant/skeleton-navigation/tree/so-answer-20150416-02/src
Make sure that item.enabled is being returned as a boolean and not a string.