The style of <a> (anchor) tag title attribute is pre-defined for the browser and it may differ from one browser to the other. The webpage cannot display the changes in the tool-tip if based on the title attribute.
The option is to make a false-tool-tip using CSS properties according to the wish. For doing this, the data-title attribute must be used. The data-* attributes method is used to store custom data which is private to the page or application. There are various ways of accessing them which can be used by CSS.
Example 1: This example makes tool-tip bigger and with a different background color.
Example 2: The following example styles the tool-tip better than the last one using some better CSS properties.
- HTML | title Attribute
- HTML | <abbr> title attribute
- How to change the style of alert box using CSS ?
- How to change cursor style using jQuery ?
- How to change style of elements on scroll using jQuery ?
- How to detect and change the content/style of a div using jQuery ?
- How to change the font style of a text canvas using Fabric.js ?
- How to change corner style of a canvas-type text using Fabric.js ?
- HTML | style attribute
- HTML | <style> type Attribute
- HTML | <style> media Attribute
- HTML | title Tag
- HTML | DOM title Property
- How to get the title of an HTML page ?
- HTML | DOM Title Object
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.