3

カスタム ツールチップを定義できる小さな jQuery スクリプトを使用して、アプリのすべての要素のデフォルト ツールチップ (title=" * ")を置き換えようとしています。

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

フィドルをチェックしてください：http://jsfiddle.net/tnEmZ/1/

4

3 に答える 3

4 
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
       }
    });  
});

デモはこちら

于 2013-02-05T08:14:15.783 に答える
2

このDEMOがお役に立てば幸いです。

$(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 })
        });
});

別の例HERE with jquery tooltip.

ソース: http://jqueryui.com/tooltip/

于 2013-02-05T07:48:57.373 に答える
1

ツールチップ ウィジェットは jQuery の一部ではなく、jQueryUI の一部です。また、ツールチップ ウィジェットには jQueryUI 1.9.0 が付属しており、jsfiddle は jQueryUI 1.8.3 を使用しているため、jsfiddle では機能しません。詳細については、こちらを参照してください。

于 2013-02-05T07:50:22.923 に答える