Create a popup using bootstrap

Question

I have to create a popup like this:

And then, bind it to an html element and make it appear when hovering it.

I'm using bootstrap, and so far i've been trying this:

HTML:

<a data-toggle="uid-popover" class="od-icon info-icon clientreference-info-button cursor-pointer"></a>

Javascript:

var popoverTemplate = ['<div class="timePickerWrapper popover">',
    '<div class="arrow"></div>',
    '<div class="popover-content">',
    '</div>',
    '</div>'].join('');

    var content = ['<div>TEST</div>', ].join('');

    $('[data-toggle="uid-popover"]').popover({
        content: content,
        template: popoverTemplate,
        placement: "up",
        html: true
    });

I would like to know if it's possible to locate the popup just in front of the hovering item, but i'm not able to do it, because the "placement" parameter only accepts "up,bottom,left,right" inputs.

If there is any other way to make popups easier with or without bootstrap, I would be really thankful to know.

Thanks.

You could use QTip2 which is optimized to created popup and you can easily position your popup — Alexandre Tranchant, Jan 05 '17 at 10:20
What do you mean by `locate the popup just in front of the hovering item` - you mean to the left of it? Over it? — StudioTime, Jan 05 '17 at 10:29
If you place it over it then you will not be hovering any more so surely it would immediately vanish again? — StudioTime, Jan 05 '17 at 10:32
The idea is to maintain the popup visible until you call the event onMouseOut from it, for example, just a rapid thought. But that was nice to consider. — avilac, Jan 05 '17 at 10:35

score 0 · Answer 1 · answered Jan 05 '17 at 11:16

You can set it manually like following. please create fiddle I could not insert link also could not create a snippet.

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<p>Click on button to see Popover</p>
<div style="width:200px; margin: 0 auto;">
<a href="#" id="example" class="btn btn-primary" rel="popover" data-content="This is the body of Popover"   data-original-title="Creativity Tuts">pop</a>
</div>


$(function () {
$('#example').popover();
$('#example').on("shown.bs.popover",function(e){
$(".arrow").hide();
var d = $(".popover")[0];
d.style.left = ((d.offsetLeft) - ($(".popover").width()/1.4)) + "px";
d.style.top = ((d.offsetTop) + ($(".popover").height()-15)) + "px";
})  
});

Create a popup using bootstrap

1 Answers1