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
BurebistaRuler
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
alexP
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
Sowmya
source
to share
The tooltip widget is not part of jQuery but jQueryUI. Also, it won't work on your jsfiddle as the tooltip widget comes with jQueryUI 1.9.0 and your jsfiddle is using jQueryUI 1.8.3. For more information see here .
+1
Vianney dupoy de guitard
source
to share