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

Generating tooltip text from .js/external file

本文关键字：工具提示 文本 文件 js 外部      更新时间：2023-09-26

我创建了一个简单的jQuery工具ip：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
        }
    });
});

感谢

$(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文件：

<?php echo json_encode(array('tooltip' => $_GET['tooltip_id'])); ?>
相关文章：