How to display tooltip in knockoutjs when button is disabled

user_17682302 0
Viewed 91

I used CSS to disable the button and I also want to display a tooltip. However just because I disabled the button, I am not able to see my tooltip.

.disabled {
    display: block !important; 
    pointer-events: none; 
    color: #ccc; 
}

  <button class="actionButton button primaryBt largeSize" data-bind="click:$root.openStaticVisualizer.bind($root, selectedRoom()), css: { disabled: !displayStaticVisualizer()}, attr:{ title :!displayStaticVisualizer()? ApprovalText: 'test' }">
                <svg class="ico visualizationIcon"><use xlink:href="Content/icons/icons.svg#visualizationIcon" /></svg>
                <span>Visualize Room</span>
            </button>

knockout.js css html javascript
1 Answers

Your .disabled class disables all pointer-events. This breaks all of the browser's default behaviors that rely on a pointer, like showing a title on hover.

Instead, use the disabled attribute. This does not block the title from showing, but does disable clicking the button.

You can apply the disabled attribute directly through knockout's disable and enable bindings.

You can apply custom styling by creating a css rule for the :disabled pseudo-class.

<button
  disabled
  title="This information appears when hovering"
>Hover me for more information</button>

user_32972910
Related