Bootstrap popover inside textbox

Question

I am using jquery-tokeninput library and creating custom tokens inside a text box. I have a weird requirement where I want to show, bootstrap popover in the remaining part of the textbox after/during tokens are entered. It will show up when you hover over inside the text box white space after the tokens.

My initial idea for this is to, use an empty div inside the textbox and use a popover on that. Not sure if that is the right approach. But again the popover will be attached to one point in the div.

I am not attaching any code because here its more to do with approach than code.

When you say "remaining part of the text box", are you referring to the image you attached to your issue, or are you looking to move the popover to appear directly over the text box, instead of above it? — Steve Brownlee, Oct 04 '15 at 03:12
Its actually exactly similar to the image I attached. The tip of popover should be inside the text box. I will be having tokens in the text box (with their own popovers). The remaining part of text box is whatever space is left after using the tokens. The popover will be shown when you hover over inside the text box white space after the tokens. — Anuj Kulkarni, Oct 04 '15 at 03:14

score 2 · Answer 1 · answered Oct 04 '15 at 03:23

2

Well, I just checked out the demo page for that library and I noticed that as you add tokens, the library simply keeps inserting a new li element before that last one. That last one always has a default id of "token-input-input-token", so you could target that element as the anchor of the popover.

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

answered Oct 04 '15 at 03:23

Steve Brownlee

113
1
6

Yes you are right @Steve, thats one solution. But I am using the example shown as in Instant Demo, where actual `li` for editing is roughly 20% of the textbox. So I guess I need to create another `li` with rest of the div and attach popover on that. This is my initial solution, I am not sure there exists anything better. Thanks for taking time to answer. – Anuj Kulkarni Oct 04 '15 at 03:43
If you want the width of the `li` to fill in the remainder of the parent text box, you can achieve that by adding some simple JS code by listening for the [onAdd](http://loopj.com/jquery-tokeninput/demo.html#onadd-ondelete) event. `onAdd: function (item) { // Recalculate width of li element here }` – Steve Brownlee Oct 04 '15 at 03:56

Shehary · Answer 2 · 2015-10-04T03:50:26.530

You can achieve with 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

I wanted to have popover only over empty text area when you hover inside that white space in a textbox. Thanks for taking time to answer. — Anuj Kulkarni, Oct 04 '15 at 03:45
you can change this function `on("change keyup", function()` to `.hover( function ()` — Shehary, Oct 04 '15 at 03:49

score 0 · Answer 3 · answered Sep 16 '22 at 08:39

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

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — primo, Sep 21 '22 at 04:30

Bootstrap popover inside textbox

3 Answers3