使用input元素作为工具提示中的内容

时间:2016-03-23 10:36:07

标签: javascript jquery html twitter-bootstrap

假设我在div元素上附加了一个bootstrap工具提示

function iter(o, flip) {
    if (Array.isArray(o)) {
        o.forEach(function (a) {
            iter(a, flip);
        });
        return;
    }
    if (typeof o === 'object') {
        if ('chairId' in o) {
            chairId = o.chairId;
        }
        if (
            flip === 'relatedOrders' &&
            'notifications' in o &&
            0 in o.notifications &&
            'latestNotification' in o.notifications[0] &&
            'latestNotificationAction' in o.notifications[0].latestNotification
        ) {
            result.push({
                chairId: chairId,
                alert: o.notifications[0].latestNotification.latestNotificationAction
            });
            return;
        }
        flip in o && iter(o[flip], flipFlop[flip]);
    }
}

var myObj = { data: { chairId: "CHAIRCHROME009", relatedOrders: [{ someProp: 45423234, data: { firstOrder: {}, relatedOrders: [{ someProp: 5757587, data: { firstOrder: {}, relatedOrders: [], notifications: [{ notificationId: "CHAIR-0909FF", latestNotification: { latestNotificationAction: "New", priority: "High", } }], relations: [] } }], relations: [] } }], relations: [] } },
    chairId,
    result = [],
    flipFlop = { relatedOrders: 'data', data: 'relatedOrders' };

iter(myObj, 'data');
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

如何创建用作内容的输入元素,而不仅仅是文本。

我试过

<div class="text-center text" data-container="body" 
     data-toggle="popover" data-placement="left" 
     data-content="Some content">Text</div>

但它将它作为一个字符串返回。 创建输入对象并尝试使用javascript附加它也不起作用:

data-content="<input type='text'>

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

您应将data-html属性设置为true,以便使用html内容或标题进行弹出式广告。

请参阅jsfidle example

ps:hover触发器没有任何意义。

<a href="#" class="btn btn-primary" style="margin: 250px;"
       data-placement="left"
       data-trigger="click"
       data-html="true">test</a>



$(".btn").popover({ content : '<b>test</b><input type="text">' });