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
Related
Just want to prevent one of my buefy button to be focused when i click on it :
Code of the button :
<b-button class="button-rounded" type="is-success" icon-right="film" rounded />
Not focused :
Focused :
In my use case other design i add on the button are getting cleared by the focus, i want to prevent any focus when clicking on the button. I'm using VueJS 2 with Buefy (Bulma)
Any idea ?
thanks in advance
Does
<b-button tabindex="-1" class="button-rounded" type="is-success" icon-right="film" rounded />
do the trick?
I'm currently making an mobile web application with next.js boilerplate.
My back button code is this.
import Router from 'next/router'
<button>
<a href="#" onClick={() => Router.back()}>
<span> some back button icon here </span>
</a>
</button>
I don't think there's anything wrong with my html code but when clicking that button on
safari browser, it doesn't work. Anybody had same experience? or know the solution? or know why this is happening?
please share ;
FYI. I've tried major browsers like IE, Chrome, Firefox but only Safari don't work.
this work for me:
import Router from 'next/router'
...
<button>
<a href="#" onClick={(e) => { e.preventDefault(); Router.back(); }}>
<span> some back button icon here </span>
</a>
</button>
A little late, but I'm sure someone needs it.
I made modal component using v-show options live below.
<registerModal v-show="register.etcCompanyVisible" />
Thus, when register.etcCompanyVisible is true, this modal appears.
And this modal has some input like this.
<input type="text" v-model="etcCompanyName" placeholder="name" autofocus />
When this modal is opened at first time, the autofocus works well.
And then, this modal can be closed with cancel button by changing register.etcComapnyVisible to false.
<button class="btn secondary" v-on:click="etcCompanyVisibleClosed()">Cancel</button>
When I open modal again, the autofocus doesn't work. I think it needs some reset option for this modal, but I don't know how it can be done.
Could you give me some recommendation? Thank you so much for reading.
My understanding is that the autofocus attribute is only reliable on page load, so you need to handle the focus event yourself.
The easiest way to do this is to put a ref on your input.
<input ref="companyName" type="text" v-model="etcCompanyName" placeholder="name"/>
Then when you launch your modal, maybe you are using a button, call the focus on that $ref.
<template>
...
<button #click="focusInput">launch modal</button>
...
</template>
<script>
...
methods:{
foucusInput() {
this.$refs.companyName.focus();
}
}
Note that you could use the same method to dynamically focus inputs in a certain order. Here is a fiddle demonstrating that using button clicks but you could easily use this to move from one input to the next automatically after a certain condition is met.
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>
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..