CODEWITHSUNDEEP
jqueryjquery-ui
Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

How to hide / disable browser default title tooltip using jquery

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",
});

Working Fiddle

Upvotes: 1

Views: 2801

Answers (3)

Akashxolotl
Akashxolotl

Reputation: 566

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');

Upvotes: 0

K D
K D

Reputation: 5989

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

Updated JS Fiddle

Upvotes: 2

Yigit Yuksel
Yigit Yuksel

Reputation: 1170

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');

Upvotes: 0

Related Questions