文本框

Question

我正在使用jquery-tokeninput library并在文本框中创建自定义标记。我有一个奇怪的要求，我想在输入令牌之后/期间在文本框的剩余部分显示bootstrap popover。当您将鼠标悬停在令牌后的文本框空白区域内时，它会显示出来。

我最初的想法是，在文本框中使用一个空div并在其上使用一个弹出窗口。不确定这是否是正确的方法。但是，弹道将再次附加到div中的一个点。

我没有附加任何代码，因为这里的方法与代码有关。

Answer 1

好吧，我刚刚查看了demo page for that library，我注意到在添加令牌时，库只是在最后一个之前插入一个新的li元素。最后一个始终具有默认ID＆＃34; token-input-input-token＆＃34;，因此您可以将该元素作为弹出窗口的锚点。

$('#token-input-input-token').popover({content: "Your content here"})

Answer 2

你可以用bootstrap popover实现，

$(document).ready(function(){
$("textarea").hover(function () {
	$(".Pops").popover("show");
},function () {
	$(".Pops").popover("hide");
});
$(".Pops").popover({
	//Anything optional
})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

<div class="delme" style="margin-top: 100px;"></div>
<div class="row">
    <div class="col-xs-12">
        <label>This is Textarea</label>
<div class="Pops" data-content="The questions above are required.  Please go back and answer them completely." data-title="TextArea Heading" data-placement="top" ></div>
        <div class="form-group">
            <textarea placeholder="Type Something to See It in Action" class="form-control"></textarea>
        </div>
    </div>
</div>

Fiddle