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>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>