Создайте всплывающее окно с помощью бутстрапа

Мне нужно создать всплывающее окно следующим образом:

введите здесь описание изображения

А затем привяжите его к html-элементу и сделайте так, чтобы он отображался при наведении на него курсора.

Я использую бутстрап, и до сих пор я пробовал это:

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
    });

Я хотел бы знать, можно ли найти всплывающее окно прямо перед зависающим элементом, но я не могу этого сделать, потому что параметр «размещение» принимает только входные данные «вверх, вниз, влево, вправо».

Если есть какой-либо другой способ упростить всплывающие окна с начальной загрузкой или без нее, я был бы очень благодарен узнать об этом.

Спасибо.


javascript twitter-bootstrap
person avilac    schedule 05.01.2017    source источник
comment
Вы можете использовать QTip2, который оптимизирован для создания всплывающего окна, и вы можете легко разместить свое всплывающее окно.   -  person Alexandre Tranchant    schedule 05.01.2017
comment
Что вы имеете в виду под locate the popup just in front of the hovering item - вы имеете в виду слева от него? Над ним?   -  person StudioTime    schedule 05.01.2017
comment
@AlexandreT Я изучу эту возможность, спасибо!   -  person avilac    schedule 05.01.2017
comment
@DarrenSweeney Я имею в виду.   -  person avilac    schedule 05.01.2017
comment
Если вы поместите его над ним, то вы больше не будете зависать, так что наверняка он сразу же снова исчезнет?   -  person StudioTime    schedule 05.01.2017
comment
Идея состоит в том, чтобы держать всплывающее окно видимым, пока вы не вызовете из него событие onMouseOut, например, просто быстрая мысль. Но это было приятно рассмотреть.   -  person avilac    schedule 05.01.2017

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете установить его вручную, как показано ниже. пожалуйста, создайте скрипку, я не смог вставить ссылку, также не смог создать фрагмент.

<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";
})  
});
person Maharshi    schedule 05.01.2017