I am trying to create custom tooltip plugin just for learning purpose. Every thing is working fine when I take tooltip text in a custom attribute like "tooltip", but in case of "title" I am not able to hide / disable browser default title tooltip.
HTML:
<p id="p1" title="tooltip 1">Go</a>">
This is a paragraph
</p>
<p id="p2" title="tooltip 2">
This is another paragraph
</p>
JQuery:
$("p").tooltip({
autoClose: false,
color: "white ",
backgroundColor: "grey",
});
in your provided JSFiddle, you have following code
var tooltipContent = $(this).attr('data-ttl');
var newElem = '<span class="tooltip">'+ tooltipContent +'</span>';
instead of adding title, try to add following data attribute in your P Tag
<p id="p1" data-title="tooltip 1">Go</a>">
This is a paragraph
</p>
<p id="p2" data-title="tooltip 2">
This is another paragraph
</p>
and change code to following
var tooltipContent = $(this).data('data-title');
var newElem = '<span class="tooltip">'+ tooltipContent +'</span>';
Please find updated JS Fiddle
EDIT
If you check the actual jQuery UI tooltip, default browser tooltip doesn't appear. jQuery UI Tooltip
The reason is that, if you check HTML in Developer tool window you can see the library itself remove content in "title" attribute on mouseenter and reset it again on mouseout. After looking at your fiddle, it seems you are adding your own logic to show and hide tooltip. Well incase you add your custom logic you have to handle those all cases as well. Do following step to have same behavior as default jQuery tooltip.
Remove content in the "title" attribute when you create tooltip and show (on mouse enter).
Store that content some where or in "data" attribute of tag.
Reset the content again to "title" attribute when user moves out the mouse from the control.
Please refer this JS Fiddle with solution for your issue. i have modified your tooltip click event to restore the title content
you can not disable custom browser tooltip (you can do it with javascript not default way). However you can use this trick :
<p id="p1" data-title="tooltip 1">
This is a paragraph
</p>
on jquery you can get variable from data-title :
var tooltipContent = $(this).attr('data-title');
Workaround with some js to remove title attribute & add a class for css/future ref.
const elem_title = document.querySelector('#elem_with_title');
elem_title.classList.add('newclassname');
elem_title.removeAttribute('title');
