The title
attribute in HTML elements is used to provide additional information about the element, typically displayed as a tooltip when the mouse hovers over the element. CSS cannot directly control the behavior of the title
attribute because it's a browser/OS-level feature.
However, if you want to prevent the title
tooltip from appearing, you can use a little trick: set the pointer-events
property to none
. This will prevent any mouse-related events, including the hover event that triggers the tooltip.
.no-title-tooltip {
pointer-events: none;
}
Then, apply the class to the desired elements:
<a href="#" title="This tooltip won't show!" class="no-title-tooltip">Hover over me</a>
Note: Using pointer-events: none;
will also prevent other mouse interactions with the element, such as clicks. If the element is interactive (like a link or button), this approach might not be suitable. If you genuinely want to hide the title
tooltip without affecting other interactions, you might need to use JavaScript to dynamically remove or change the title
attribute on hover and restore it afterward.