score:0
As I need this functionality to be available during another action (as copy screen or pick color,) my solution contains two functions to be called when that action starts and when it ends:
$.removeTitles = function() {
$('[title]').bind('mousemove.hideTooltips', function () {
$this = $(this);
if($this.attr('title') && $this.attr('title') != '') {
$this.data('title', $this.attr('title')).attr('title', '');
}
}).bind('mouseout.hideTooltips', function () {
$this = $(this);
$this.attr('title', $this.data('title'));
});
}
$.restoreTitles = function() {
$('[title]').unbind('mousemove.hideTooltips').unbind('mouseout.hideTooltips');
$('*[data-title!=undefined]').attr('title', $this.data('title'));
}
MouseEnter cannot be used because other element(s) could lay over the titled element (as an image in a titled div) and than mouseOut will occur as soon as hover over the inner element (the image!)
However when using mouseMove you should pay attention because the event fires multiple times. To avoid wiping the saved data, check first that the title is not empty!
The last line in RemoveTitles, attempts to restore the title from the element from which the mouse did not exit when calling the end on mouseClick or on a shortcut key.
score:1
Hack up ClueTip
to use a renamed title attribute.
Some more answer related to the same question
- How to use a CSS class with the jQuery Bootstrap4 effect
- How to use jQuery autocomplete plugin with array of arrays in a js file as the source?
- How do I get the dynamically loaded element that was clicked with jQuery
- jQuery Selectors-> How can I get the value of a field that was selected with 'id begins/ends with'?
- How to clone typing to every input from the first box with jquery on checkbox checked?
score:3
You could use jQuery to remove the contents of the title attribte, or move it into some other parameter for later use.
This does mean you lose some accessibility though.
RE: ClueTip A search of Google seems to suggest this is a common problem - is this only happening in IE? ClueTip seems to work as expected in FireFox.
score:3
function hideTips(event) {
var saveAlt = $(this).attr('alt');
var saveTitle = $(this).attr('title');
if (event.type == 'mouseenter') {
$(this).attr('title','');
$(this).attr('alt','');
} else {
if (event.type == 'mouseleave'){
$(this).attr('alt',saveAlt);
$(this).attr('title',saveTitle);
}
}
}
$(document).ready(function(){
$("a").live("hover", hideTips);
});
Hi all. I am using this solution and it works fine in all browsers.
score:8
Here is the modern jQuery way to do it (IMO)...
$('[title]').attr('title', function(i, title) {
$(this).data('title', title).removeAttr('title');
});
...and of course, reading the title
attribute back is done with...
$('#whatever').data('title');
score:8
Following Dan Herbert's suggestion above, here is the code:
$(element).hover(
function () {
$(this).data('title', $(this).attr('title'));
$(this).removeAttr('title');
},
function () {
$(this).attr('title', $(this).data('title'));
});
score:53
You could remove the title
attribute on page load.
$(document).ready(function() {
$('[title]').removeAttr('title');
});
If you need to use the title later, you can store it in the element's jQuery data()
.
$(document).ready(function() {
$('[title]').each(function() {
$this = $(this);
$.data(this, 'title', $this.attr('title'));
$this.removeAttr('title');
});
});
Another option is to change the name of the title
attribute to aTitle
, or something else that the browser would ignore, and then update any JavaScript to read the new attribute name instead of title
.
Update:
An interesting idea you could use is to "lazily" remove the title when hovering over an element. When the user hovers off the element, you can then put the title value back.
This isn't as straightforward as it should be because IE doesn't correctly remove the tooltip on the hover event if you set the title attribute to null
or remove the title attribute. However, if you set the tooltip to an empty string (""
) on hover, it will remove the tooltip from all browsers including Internet Explorer.
You can use the method I mentioned above to store the title attribute in jQuery's data(...)
method and then put it back on mouseout
.
$(document).ready(function() {
$('[title]').mouseover(function () {
$this = $(this);
$this.data('title', $this.attr('title'));
// Using null here wouldn't work in IE, but empty string will work just fine.
$this.attr('title', '');
}).mouseout(function () {
$this = $(this);
$this.attr('title', $this.data('title'));
});
});
Related Query
- How to get all the elements with the same class name from any jquery object?
- How to change the value of option with jquery
- how can I enable and disable scroll by clicking the same element with jquery?
- How to force a chatbox DIV to stay displaying the bottom as new messages appear with jQuery
- jquery handling recursive ajax calls, how to tell the browser it's done
- Cannot disable the textboxes with jquery
- How to post data to the href of a <a> element with jquery
- how to disable the functionality to hide/show the chart when user click ChartLegend with ShieldUI?
- How to disable or hide the native player in IOS, using Jquery / Javascript?
- How to get the correct a:nth-child into an <input> with jQuery
- How to get the index of an element below the dragged one on "sortover" event with jQuery UI Sortable?
- Jquery - How to detect change in browser height without having to refresh the browser?
- How do I update the class of a jQuery Draggable Item with the Parent ID that it's dropped into?
- How to disable the future date in the jquery datepicker
- With jQuery 'draggable', the text wraps for some reason when colliding with container. Why? and how to fix?
- How to disable date based on the current time in jQuery UI Datepicker?
- MVC 4: Create HTML textboxes dynamically with JQUERY and PartialViewResult. How to fill the model if the code is added dynamically?
- How to get rails to update the page with js after a jquery $.get call?
- How do i get the value of a bootstrap form helper phone input with jquery
- How to get the child nodes of a parent and process it with jquery ajax
- How to create a tooltip for the filter widget of the JQuery tablesorter plugin?
- How to use JQuery Proxy with the JQuery Boilerplate
- How to set the height of browser window when it loads first time using jQuery or java script
- How to set the options in jQuery widget Factory with values from server side variables(JSON file)
- (CSS/jQuery) How resolve the conflict between top and bottom property with jQuery
- How do I get the data from forms dynamically created with jQuery into php?
- How to disable sorting JQuery DataTable with asp.net Gridview
- How do I use the forvo API with jquery ajax?
- How to use the same JQuery effect for different divs with same class
- How to append an element, all its children, and all classes of the parent and children with jQuery
- How do you get the full height with jQuery
- How to group table rows and filter the groups with jQuery or JavaScript?
- How to use the filter plugin of jQuery tablesorter with cells containing HTML elements?
- How can I include jquery inside my javascript module without conflicting with the global namespace?
- How to interact with a jQuery colorbox using the python framework Splinter?
- JQuery How do I add an id to the parent div of an iframe with the value of iframes id + "whatever"?
- How do Post with jquery such that redirect from the server will be properly rendered?
- Jquery how to select images from an other page with the url
- How to set the key\value within the jQuery Autocomplete control with json data?
- With Rails, how to send the browser a json object versus a json string?
- How to I change the action attribute for a html form on submit with JQuery using the jquery form plugin?
- How to disable form Submit button until fields are filled with jQuery Mobile?
- How do I reset the values in javascript without using .animate, related with jquery
- How to append an ID with the value from another ID in JQuery
- How to hijack a form using a jQuery dialog and then continue with the submit
More Query from same tag
- Image has padding/margin when they have been set to 0
- Autocomplete not working on dynamically created input element
- Use typeahead.js on multiple inputs on same page
- Flexslider and mousewhell speed
- Creating editable PDF with JsPDF
- FadeOut iff rails instance variable is equal one
- Error: "PageMethods is not defined"
- Live() jquery function not working correctly
- JQuery: How to detect mobile width and change my css to it's with using jquery?
- Open a link from iframe to be opened in the main window
- How can i render in my html file(Backbone js)?
- jQuery blur issue
- How to know the selected rows in WebGrid
- Ruby on rails cocoon gem - unable to capture callback events
- Bootstrap4, Webpack, Navbar toggle button
- Set width of child div in flex container
- Slider Value Display with jQuery UI - 2 handles
- Manipulating the clipboard with JavaScript breaks formatting
- Bootstrap 4 tool-tip appearing from the second hover on a dynamic element
- tableutils filter input move outside table
- Using selenium.isElementPresent in Selenium 1 won't detect an element appended to the DOM with jQuery
- javascript works in Chrome and Firefox But not IE
- Customise owl-carousel 2 on desktop/mobile
- javascript jquery plugin clashes
- Improve responsetime from generic handler made by a jquery ajax call?
- change var into a cascade animation jQuery
- Flickering on page load when using position: absolute
- chartjs improvement display label
- Form is submitting if condition fails
- How do I attach a jQuery event to a object's method?