Question

我创建了一个简单的jQuery工具包：http://jsfiddle.net/oampz/k9THH/

我的问题是我不想将文本放在img标签内，因为我在一个页面上有超过20个工具提示，每个工具提示中有很多文本..有什么方法可以让我获得工具提示访问权限一个.js文件（或任何其他文件）并从中捕获必要的文本？

HTML：

<img class="tooltip" src="http://www.katherineemmons.com/wp-content/uploads/2013/06/question_mark-icon.png" title="tool tip text 1" height="20px" />
<br>
<img class="tooltip" src="http://www.katherineemmons.com/wp-content/uploads/2013/06/question_mark-icon.png" title="tool tip text 2" height="20px" />
<br>
<img class="tooltip" src="http://www.katherineemmons.com/wp-content/uploads/2013/06/question_mark-icon.png" title="tool tip text 3" height="20px" />
<br>
<img class="tooltip" src="http://www.katherineemmons.com/wp-content/uploads/2013/06/question_mark-icon.png" title="tool tip text 4" height="20px" />
<br>
<img class="tooltip" src="http://www.katherineemmons.com/wp-content/uploads/2013/06/question_mark-icon.png" title="tool tip text 5" height="20px" />
<br>
<img class="tooltip" src="http://www.katherineemmons.com/wp-content/uploads/2013/06/question_mark-icon.png" title="tool tip text 6" height="20px" />

jQuery的：

$(function () {
    $(".tooltip").tooltip({
        show: {
            effect: "slideDown",
            delay: 250
        }
    });
});

由于

Answer 1

$(document).tooltip({
    show: {
        effect: "slideDown",
        delay: 250
    },
    content: function() {
        var element = $( this );
        if ( element.is( ".the_class" ) ) {
            return "The text here";
        }           
    },

});

Answer 2

 <html>
 <head></head>
 <link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.css">
 <script src="js/jquery-1.10.2.js"></script>
 <script src="js/jquery-ui-1.10.4.custom.js"></script>
 <body>
    <img src="http://yoursite.com/img/" data-tooltip-id="1" />
    <br>
    <img src="http://yoursite.com/img/" data-tooltip-id="2" />
    <br>
    <script>
        $(function(){
            var tooltip_blob = '';
            $(document).tooltip({
                items : "[data-tooltip-id]",
                content: function() {
                    var tooltip_id = $(this).data('tooltip-id');
                    jQuery.ajax({
                        async:false, 
                        dataType: 'json', 
                        type : 'get', 
                        url : 'http://yoursite.com/ajax.php?tooltip_id='+tooltip_id, 
                        success : function(data){ 
                           tooltip_blob = data.tooltip;
                       }});       
                    return tooltip_blob;
                }
            });
        });
    </script>
</body>
</html>

ajax文件：

<?php echo json_encode(array('tooltip' => $_GET['tooltip_id'])); ?>

从.js /外部文件生成工具提示文本

2 个答案: