Display Vue Bootstrap b-tooltip only if b-button is disabled-CodePudding

A b-button is conditionally disabled if the user is an admin. Right now, a b-tooltip displays when hovering over it and it is not disabled.

Is there a way to display the tooltip only if it is disabled?

I've tried adding the v-bind, a v-if, id:disabled, and multiple variations of those on the button and tooltip, to no avail.

<form ref="form" @click="handleDelete">
    <b-button v-bind:disabled="userRole !== 'admin'" id="tooltip-target-1" variant="danger">
        Admin Delete Agency
    </b-button>
    <b-tooltip target="tooltip-target-1" triggers="hover">
      You cannot delete an agency with children. Reassign child agencies to continue deletion.
    </b-tooltip>
</form>

CodePudding user response：

To hide the tooltip when the button is enabled, use v-if

<form ref="form" @click="handleDelete">
    <b-button v-bind:disabled="userRole !== 'admin'" id="tooltip-target-1" variant="danger">
        Admin Delete Agency
    </b-button>
    <b-tooltip v-if="userRole !== 'admin'" target="tooltip-target-1" triggers="hover">
        You cannot delete an agency with children. Reassign child agencies to continue deletion.
    </b-tooltip>
</form>

And to make the tooltip work on a disabled button, check out this section of bootstrap vue docs.

CodePudding user response：

I added a v-if on the tooltip and a span wrapping the button. Thanks @Romalex

<form ref="form" @click="handleDelete">
      <span id="disabled-wrapper"  tabindex="0">
        <b-button v-bind:disabled="userRole !== 'admin'" style="pointer-events: none;" variant="danger">
          Admin Delete Agency
        </b-button>
      </span>
      <b-tooltip v-if="userRole !== 'admin'" target="disabled-wrapper" triggers="hover">
        You cannot delete an agency with children. Reassign child agencies to continue deletion.
      </b-tooltip>
    </form>