Replace the default tv tooltip with jQuery tooltip
I am trying to replace the default tooltip (title = "*") for all elements from my application using a little jQuery script that allows me to define a custom tooltip.
<div>
<input type="text" title="default tooltip" />
<textarea type="text" title="default tooltip"></textarea>
<select title="default tooltip"><option>select</option></select>
</div>
...
$(function() {
$('input, textarea, select, p, label').tooltip({
hide: {
effect: "explode",
delay: 250
}
});
});
check fiddle: http://jsfiddle.net/tnEmZ/1/
+3
source to share
3 answers
var $title = $("a,input,p,label,textarea[title]"); //get all elements with the title-Attribute
//loop through title-elements
$.each($title, function(index, value) {
$(this).tooltip({
show: {
effect: "explode",
delay: 250
},
hide: {
effect: "explode",
delay: 250
}
});
});
Demo here
+4
source to share
Hope this DEMO helps you.
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
Another example is HERE with . jquery tooltip
Source: http://jqueryui.com/tooltip/
+1
source to share