显示固定的“工具提示"当输入获得焦点时，使用jQuery [英] Display a fixed "ToolTip" when an input receives focus, using jQuery

问题描述

关于jQuery的初学者总问题:

我有一个包含多个文本框的表单(输入类型为文本").我想在TextBox获得焦点时显示某种工具提示，而在失去焦点时隐藏它.理想情况下，工具提示应该是左侧或右侧的语音"气泡.

我用Google搜索了一下，发现 qTip for jQuery ，但这似乎是Tooltips的插件将鼠标悬停在某物上时，但具有我想要的布局和位置.

我天真地尝试将其绑定到文本框:

$(function() {
    $("input[id$=tbMyTextbox]").qtip({
        content: 'My Tooltip Text'
    });
});

(选择器起作用了，因为它是ASP.net，所以我没有使用#tbMyTextbox，并且我没有使用<％= tbMyTextBox.ClientID％>，因为我的.aspx文件中没有任何代码，但这已关闭-topic-选择器本身可以与其他东西一起使用，所以我认为很好.)

任何人都可以给我一个提示，告诉我它如何工作，或者告诉我另一个可以做到这一点的jQuery插件吗?

谢谢！

谢谢，表演活动可以解决问题！

    $("input[id$=tbMyTextbox]").qtip({
        content: 'Test',
        position: {
            corner: {
                target: 'rightMiddle',
                tooltip: 'leftMiddle'
            }
        },
        show: {
            when: {
                event: 'focus'
            }
        },
        hide: {
            when: {
                event: 'blur'
            }
        }
    });

解决方案

您可以在display:none隐藏的元素中手动创建工具提示，该元素将显示在焦点事件处理程序中.

$("input[id$=tbMyTextbox]").focus(function() {
   $("div[id$=tooltip]").show();
});

$("input[id$=tbMyTextbox]").blur(function() {
   $("div[id$=tooltip]").hide();
});

另一种可能是在qTip中使用show选项.我从没使用过qTip，所以这纯粹是理论上的事情，但是您应该可以在选项中指定show: { when: { event: 'focus' } }.

http://craigsworks.com/projects/qtip/docs/reference/#显示

Total beginner question about jQuery:

I have a Form that contains several TextBoxes (input type="text"). I would like to display some sort of Tooltip when the TextBox receives focus and hide it when it loses focus. Ideally, the tooltip should be a "speech" bubble on the left or right side.

I googled a bit and found qTip for jQuery, but that seems to be a Plugin for Tooltips when hovering over something, but has the layout and positioning that I want.

My naive attempt to bind it to a textbox:

$(function() {
    $("input[id$=tbMyTextbox]").qtip({
        content: 'My Tooltip Text'
    });
});

(The selector works, i'm not using #tbMyTextbox since it's ASP.net, and I am not using <%= tbMyTextBox.ClientID %> because I cannot have any code in my .aspx file, but that's off-topic - the selector itself works with other stuff, so I assume it's fine.).

Can anyone give me a hint how it could work or tell me about a different jQuery plugin that does that?

Thanks!

Edit: Thanks, the Show Event does the trick!

    $("input[id$=tbMyTextbox]").qtip({
        content: 'Test',
        position: {
            corner: {
                target: 'rightMiddle',
                tooltip: 'leftMiddle'
            }
        },
        show: {
            when: {
                event: 'focus'
            }
        },
        hide: {
            when: {
                event: 'blur'
            }
        }
    });

解决方案

You could create your tooltip manually in an element hidden with display:none which would be shown in a focus event handler.

$("input[id$=tbMyTextbox]").focus(function() {
   $("div[id$=tooltip]").show();
});

$("input[id$=tbMyTextbox]").blur(function() {
   $("div[id$=tooltip]").hide();
});

Another possibility might be using the show option in qTip. I've never used qTip, so this is purely theoretical on my end, but you should be able to specify show: { when: { event: 'focus' } } in the options.

http://craigsworks.com/projects/qtip/docs/reference/#show

这篇关于显示固定的“工具提示"当输入获得焦点时，使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！