Question

我从不研究过这类东西。

我的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>

我的要求是，如果您点击该字段，我想显示popover，为此我的网页设计师提供以下模板。

 <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上渲染popover，只需将模板代码添加到textField的data-content属性中。

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

如果光标超出文本字段，我想删除（隐藏）textField顶部的popover。

我尝试将模板代码添加到数据内容属性，但它无效。

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

请任何人都可以帮助我，我完全被困在这里。

由于

Answer 1

您可以使用以下jquery代码来显示bootstrap popover，请参阅此处的fiddle

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

如何在Textfield上显示popover

1 个答案: