如何编写commom jquery函数来显示工具提示答案

【问题标题】：How to write commom jquery function to display tooltip如何编写commom jquery函数来显示工具提示
【发布时间】：2013-09-29 04:01:39
【问题描述】：

我正在使用 coda 样式的 jquery 插件来显示气球工具提示。这是链接：http://www.uhleeka.com/blog/2009/11/bubbletip/

我已经编写了这个 jquery 来在点击元素时显示气球工具提示。

这就是我在 id 上所做的，但我如何使用类名来做到这一点。如何为每个 id 编写气泡提示函数，如何编写单个（通用）jquery 函数来应用气泡提示。

<script type="text/javascript">
    $(document).ready(function() {
            $('#fee').bubbletip($('#tip1_focusblur'), {
                deltaDirection: 'right',
                bindShow: 'click',
                bindHide: 'blur'
            });



            $('#price').bubbletip($('#tip2_focusblur'), {
                deltaDirection: 'right',
                bindShow: 'click',
                bindHide: 'blur'
            });

    });
</script>

<p>Input box 1<input type="text" id="fee" value="focus me!" /></p>

<div id="tip1_focusblur" style="display:none; max-width:330px;">
    <pre class="tip">
        This is the div where help can be display.
    </pre>  
</div>

<p>Input box 2<input type="text" id="price" value="focus me!" /></p>

<div id="tip2_focusblur" style="display:none; max-width:330px;">
    <pre class="tip">
        This is the div where help can be display.
    </pre>  
</div>

编辑： 我找到了解决方案：按照 JofryHS 的建议，我已经尝试过这个解决方案。

这是好的解决方案吗？？

Javascript：

$(document).ready(function() {
    var count = 0;
        $('[data-bubble]').each(function() {    
            count++;
            var data = $(this).attr('data-bubble');
            $(this).parent().append($('<div class="bubble" id="bubble_'+ count+ '">' + data + '</div>'));
            $(this).bubbletip('#bubble_'+count, {
                deltaDirection: 'right',
                bindShow: 'click',
                bindHide: 'blur'
            });
        });
});

HTML：

<input type="text"  data-bubble="This is Test text 1"  value="focus me!" />

<input type="text"  data-bubble="This is Test text 2"  value="focus me!" />

【问题讨论】：

我找到了解决方案。查看我的编辑

标签： jquery html

【解决方案1】：

一种方法是创建一个全局函数并在每次需要时调用它

 function bubbleTip(obj1,obj2){
    $('#'+obj1).bubbletip($('#'+obj2), {
            deltaDirection: 'right',
            bindShow: 'click',
            bindHide: 'blur'
        });
}

并使用要显示工具提示的参数调用函数。

$(function(){ //shorthand for document.ready
   bubbleTip('fee','tip1_focusblur');
   bubbleTip('price','tip2_focusblur');
});

【讨论】：

【解决方案2】：

您可以使用 HTML data- 属性自动调用气泡提示。

HTML + 脚本（未测试）：

<script type="text/javascript">
    $(document).ready(function() {
            $('[data-bubble!=""]').each(function() {
                var target = $(this).data('bubble');
                $(this).bubbletip($('#' + target), {
                    deltaDirection: 'right',
                    bindShow: 'click',
                    bindHide: 'blur'
                })
            });
    });
</script>

<p>Input box 1<input type="text" id="fee" data-bubble="tip1_focusblur" value="focus me!" /></p>

<div id="tip1_focusblur" style="display:none; max-width:330px;">
    <pre class="tip">
        This is the div where help can be display.
    </pre>  
</div>

<p>Input box 2<input type="text" id="price" data-bubble="tip2_focusblur" value="focus me!" /></p>

<div id="tip2_focusblur" style="display:none; max-width:330px;">
    <pre class="tip">
        This is the div where help can be display.
    </pre>  
</div>

只要包含上面的脚本 sn-p，您可以在 HTML 标记中的任何位置将 data-bubble 与目标放在一起，它应该会自动绑定到您的气泡提示。

类似问题：Jquery select all elements that have $jquery.data()

jQuery data

【讨论】：