How can I show a tooltip or title on disabled options in Vue Multiselect?

Utilizing vue multiselect to present a list of currencies to users, I disable any unavailable currency using the $isDisabled property. However, I am facing an issue where I am unable to display a tooltip or title when hovering over these disabled options due to the "pointer-events: none" CSS setting on them. Since I cannot manipulate the wrapper template of my custom options, what steps can I take to achieve this?

The code snippet is as follows:

<multiselect
    v-model="buyCurrency"
    :options="canBuyCurrencies"
    :show-labels="false"
    :searchable="false"
    :allow-empty="false"
    :clear-on-select="false"
    :close-on-select="true"
    class="select-buy-currency"
    @select="handleBuyCurrencyChange"
>
<template slot="option" slot-scope="props">
  <div title="Test title" class="d-flex flex-row justify-content-apart align-items-center">
    <img
        class="option__image"
        :src="`/img/flags/${props.option.code}.svg`"
        :alt="props.option.code"
    />
    <div class="option__desc">
    <span class="option__title">
      {{ props.option.code }}
    </span>
    </div>
  </div>
</template>
</multiselect>

The current implementation sets the title for all options, but it only shows up when hovering over enabled options.

In an attempt to enable pointer events through CSS, the disabled options became clickable, causing an error that disrupts the program flow. Here's the error message:

TypeError: Cannot read properties of undefined (reading 'every')
at VueComponent.wholeGroupSelected (vue-multiselect.min.js?8e5f:1:1)
at VueComponent.selectGroup (vue-multiselect.min.js?8e5f:1:1)
at mousedown (vue-multiselect.min.js?8e5f:1:1)
at invokeWithErrorHandling (vue.common.dev.js?4650:1868:1)
at HTMLSpanElement.invoker (vue.common.dev.js?4650:2193:1)
at original._wrapper (vue.common.dev.js?4650:7587:1)

How can I override the default click behavior in this scenario?

javascriptvue.js

Answer №1

When it comes to styling components, the order of precedence allows your styles to override those of third party libraries most of the time. All you need is to identify the right selector, which can be easily done using your browser's DOM inspector tool. For example, if you are working with a disabled option in vue-multiselect and it has the classname multiselect__option--disabled, you can apply custom styling like this to resolve the issue:

<style scoped>
.select-buy-currency >>> .multiselect__option--disabled {
  cursor: pointer;
  pointer-events: auto;
}
</style>

It's important to note the use of the deep selector in scoped styles when targeting elements within nested components (such as an option element inside the Multiselect child component).

If you prefer not to scope the style to a specific component and want it to be applied globally, you can omit the scoped keyword and deep selector:

<style>
.multiselect__option--disabled {
  cursor: pointer;
  pointer-events: auto;
}
</style>

For a real-world example, check out this codesandbox demo.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for a fully customizable event and booking calendar?

Currently, I am searching for a unique event and booking calendar that provides the ability to customize each cell or day with our desired content. While most calendars only allow for inputting events as text, we require a solution that enables us to add ...

javascriptjquerypluginscalendar

Using LIKE in MSSQL with an input parameter: A guide for Node developers

I found myself in a predicament where I was unsure how to phrase my question and where a solution seemed elusive. My current tool of choice is the mssql NPM package, but unfortunately, the documentation is not providing the necessary guidance. The goal I ...

javascriptsqlsql-servernode.jsnpm

Exploring the Node environment setup within Nest.js

Currently, I am in the midst of setting up a Nest.js project and seeking an efficient solution for defining the Node environment used by the ConfigService to load environment variables: import { Module } from '@nestjs/common'; import { ConfigSer ...

javascriptnode.jstypescriptenvironment-variablesnestjs

Using JavaScript (without jQuery), modify the target of an anchor link based on its text content

I am working with c# code that dynamically generates Anchor tags. I am looking to modify the target attribute of certain anchor tags based on their text. For example, the HTML code generated by the dynamic c# looks like this: <a target='_blank&ap ...

javascript

Encountering an issue: Integrating JSON data into HTML using Angular.JS!

Having trouble transferring JSON data to HTML using Angular.JS for a programming course. The author doesn't seem to have this issue, can anyone provide some assistance? I've correctly linked Angular and added the app, but it's not working a ...

javascripthtmlangularjsjson

Unable to access ng-model values within ng-repeat loop

I'm having trouble setting ng-model values within an ng-repeat statement. When I repeat this div with an array of JSON objects, I am able to print the 'ID' value of the object in any element. However, I can't use that as the ng-model v ...

javascriptangularjsangularjs-ng-repeatangular-ngmodel

Why are NodeJS and Jade/Pug variables not being recognized in the Jade script?

After successfully passing a variable to Jade like #{myvar}, I encountered an issue when trying to access it in a script block. Despite using typeof(myvar) and confirming that it was initially undefined, my attempts to display its value within the script b ...

javascriptnode.jsexpresspug

A guide to efficiently managing updates and inserts with bulkCreate in node.js

Currently, I am utilizing node.js to facilitate the uploading of an excel file into a database. Furthermore, in my service, I am employing bulkCreate to efficiently upload the data into the mysql db. In order to provide more context, I will outline the str ...

javascriptnode.jsexpressbulk-create

Assigning a one-of-a-kind identifier to a cell within a table that was dynamically created using JavaScript and

When using JavaScript to create table cells and rows and populate them with information from a JSON file, I encounter an issue where the unique ids assigned to the table cells in my code are undefined. This causes problems when trying to reference these id ...

javascriptjson

ReactJS fetch request not receiving expected response from PHP script

When I make a fetch call from my componentDidMount() method, it returns undefined. The PHP file successfully returns JSON when accessed directly on a server, but the fetch call itself returns undefined. componentDidMount() { fetch("backend.php ...

javascriptphpjsonreactjsreact-router

Is it possible to update only the necessary data using the Update Controller?

Update Controller exports.UpdatePanelMembers = (req, res) => { const { panelId } = req.params; if (panelId) { Panel.findOneAndUpdate( { _id: panelId }, { panelMembers: { member1: { memberId: req.body.pan ...

javascriptnode.jsjsonmongodb

Working with JSON in AJAX autocomplete manipulation

Hello, I usually work on the backend and don't have much experience with jQuery. However, I would like to create a simple user interface to query my API service using AJAX autocomplete. Let's assume that my API returns JSON data in the following ...

javascriptjqueryjsonajax

Implementing async/await with axios in a separate module

I've been exploring how to implement async/await with axios and an external JavaScript file. The goal is to avoid making HTTP calls directly in a Vue page and instead reuse them in multiple components. However, I've encountered an issue where the ...

vue.jsasync-awaitaxiosvuejs3

The JavaScript function does not function properly when it is called from another function

I tried my hand at creating a simple website for personal use, where I could input and edit text in an organized manner. A key feature I wanted was the ability to add new text fields dynamically by clicking a button, but it turned out to be more challengin ...

javascripthtmlcss

Sending a JavaScript value to PHP after a quiz has been completed

I've created a web page where users can take quizzes. These quizzes dynamically generate questions using JavaScript each time they are accessed. Disclaimer: I'm fairly new to JavaScript. Once the user completes the quiz, they receive their fina ...

javascriptphpajax

Modify this tooltip feature to delay the hiding of the tooltip by x seconds

I have successfully created a tooltip using the following link: http://jsfiddle.net/GLZFc/ Currently, the tooltip works perfectly fine. However, I would like it to hide after x seconds of inactivity. Additionally, if I mouse over it again, I would like th ...

javascriptjquerytooltiphide

I'm struggling to find a way to showcase my JSON data in HTML. Update: I have a clear vision of how I want it to look, but I'm struggling to display it in any format other than raw JSON

I've been trying to figure this out for hours, scouring every resource I can find, but I'm stuck. I've left the API URL in there, so feel free to take a look (it's public). If my message doesn't make sense due to exhaustion, please ...

javascriptphpjqueryjsonapi

Modifying webpage design using JavaScript for styling

Is there a way to change the css style(defined in the page source) dynamically with Java? I know it is possible to do it with JavaScript. If there isn't, are there other situations where JavaScript is the only choice developing a web app? ...

javajavascriptcss

Vue.js: Awaiting Firebase to finish loading

I'm facing an issue with integrating Firebase into a Vue JS component. It seems like the firebase object loads after my component is created. Is there a way to ensure that Firebase is fully loaded before running any JavaScript code? For example, I w ...

javascriptfirebasevue.js

Attempting to transform Go Pro GYRO data into rotational values using Three.js

I am currently working on converting gyro data from Go Pro to Three.js coordinates in order to project the footage onto the inside of a sphere. My goal is to rotate the sphere and achieve 3D stabilization. https://i.sstatic.net/VYHV6.png The camera' ...

javascriptthree.jsrotationeuler-anglesgopro