Vue MultiSelect change pointer class display

Question

I'm trying to find out how to change the html/css of the "pointer" part of vue-multiselect, e.g. https://vue-multiselect.js.org/#sub-props (showPointer)

For smaller screens the text "Press enter to select" is obscuring the value. So I'm trying to either remove the text or create my own hovering html/css.

Here's what it looks like on larger screens.

Answer 1

You can use showLabels props from vue-multiselect documentation. showLabels props has Boolean values true or false. If false then no pointer hover value will be shown. There have five custom props for controlling hover value like

• selectLabel
• selectGroupLabel
• selectedLabel
• deselectLabel
• deselectGroupLabel

You should write show-labels props when implementing these props.

You can check this example from JsFiddle: https://jsfiddle.net/sukantabala28/