如何在文本字段顶部显示弹出框

How to display popover on top of Textfield

本文关键字：显示 顶部 字段 文本      更新时间：2023-09-26

我从不做这类事情。

我的 html 页面中有一个 textField，它的代码在下面。

<div class="span4 mr1 shelflifeDiv">
        <input type="text" id="shelfLifeField" name="Shelf Life" placeholder="Shelf Life" class="po1 pull-right" data-toggle="popover" data-placement="bottom" data-html=true data-trigger="click" data-content> 
    </div>
我的

要求是，如果你点击那个字段，我想显示弹出框，为此我的网页设计师给出了以下模板。

 <script id="shelflifePopover" type="text/x-handlebars-template"> 
    <div class='row-fluid'>
            <div class='span8'><span>Maximum Time</span></div>
            <div class='span8'><input type='text' id='po1_maxtime' placeholder='Shelf life' class='mr2' disabled></div>
    </div>
</script>

他说，每当你想在textField之上渲染弹出框时，只需将模板代码添加到textField的data-content属性即可。

根据他的建议，当字段处于聚焦状态时，我使用setAttribute附加了该模板代码。

如果光标离开文本字段，我想删除（隐藏）文本字段顶部的弹出框。

我尝试将模板代码添加到数据内容属性，但它不起作用。

var ele=document.getElementById("shelfLifeField");
//I compiled template code and assigned to compileCode variable. 
ele.setAttribute("data-content",compileCode);

请谁能帮我，我完全卡在这里。

谢谢

您可以使用以下jQuery代码来显示引导弹出窗口，请在此处查看工作小提琴 

$(function () {
                var showPopover = function () {
                    $(this).popover('show');
                }
                , hidePopover = function () {
                    $(this).popover('hide');
                };
                $('#fb').popover({
                    content: 'Facebook',
                    trigger: 'hover',
                    placement:'top'
                })
            $('#tw').popover({
                    content: 'Twitter',
                    trigger: 'hover',
                    placement:'top'
                }) 
            $('#tb').popover({
                    content: 'tumblr',
                    trigger: 'hover',
                    placement:'top'
                })  
            $('#fl').popover({
                    content: 'flickr',
                    trigger: 'hover',
                    placement:'top'
                })  
            $('#yt').popover({
                    content: 'youtube',
                    trigger: 'hover',
                    placement:'top'
                })            
                .focus(showPopover)
                .blur(hidePopover)
                .hover(showPopover, hidePopover);
            });
相关文章：