文本框内的引导弹出窗口

Question

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

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

我没有附加任何代码，因为这里更多的是方法而不是代码。

Answer 1

好吧，我刚刚检查了demo page for that library，我注意到当你添加标记时，库只是在最后一个之前插入一个新的 li 元素。最后一个始终具有“token-input-input-token”的默认 id，因此您可以将该元素定位为弹出框的锚点。

$('#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