Generating tooltip text from .js/external file

StackOverflow https://stackoverflow.com/questions/22610592

题

I have created a simple jQuery toolip: http://jsfiddle.net/oampz/k9THH/

My issue is that i dont want to place the text within the img tag as i have over 20 tooltips on a page with a lot of text in each.. Is there any way i can have the tooltip access a .js file (or any other file) and capture the necessary text from that?

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

Thanks

有帮助吗？

解决方案 

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

});

其他提示

 <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 file:

<?php echo json_encode(array('tooltip' => $_GET['tooltip_id'])); ?>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top