Bootstrap popover появляется над другим элементом, чем его триггер.

Я хочу, чтобы popover отображался на другой элемент, а не на триггер. В настоящее время у меня есть:Bootstrap popover появляется над другим элементом, чем его триггер.

$triggerElement.popover({ 
       title: varTitle, 
       content: varContent, 
       html: true, 
       placement: 'auto top', 
       trigger: 'manual' 
      }); 
.......... 
<div class="shopper"></div> 

<button type="button" class="btn btn-primary">Add</button>

В настоящее время всплывающие выстреливает (нажатие кнопки событие) правильно и расположен в нижней части страницы. Однако мне хотелось бы, чтобы позиция была установлена в верхнем правом элементе у «покупателя» div (внизу div). Возможно ли это с помощью селектора или вы можете помочь мне с CSS.

Кнопка срабатывает с попсора, который нарисован над кнопкой в настоящее время. Но я хочу, чтобы вы нарисовали чуть ниже тега div покупателя. Таким образом, тег div покупателя будет действующим триггером.

источник

2016-04-07 user2906420

Опубликовать HTML тоже. – ZimSystem

@Skelly Я добавил btn html. На самом деле я просто хочу переместить popover для рисования в теге div. – user2906420

@ user2906420 где находится тег div покупателя и почему он не включен в ваш вопрос? Вы можете отредактировать скрипт, который я создал здесь. https://jsfiddle.net/DTcHh/19037/ –

Если я понимаю, что вы хотите, вам нужно вручную показать/скрыть поповер как это ..

$('.shopper').popover({ 
    title: "varTitle", 
    content: "varContent", 
    html: true, 
    placement: 'bottom', 
    trigger: 'manual' 
}); 

$('#trigger').click(function(){ 
    $('.shopper').popover('toggle'); 
});

Демо: http://www.bootply.com/7oM1aoycIi

источник

2016-04-07 17:21:50 ZimSystem

Я использую самозагрузки, где событие из другого текста будет вызывать поповер на выбранном текстовом поле, где мы хотим показать поповер

$(function() { 
 
    var showPopover = function() { 
 
     $(this).popover('show'); 
 
    } 
 
    , hidePopover = function() { 
 
     $(this).popover('hide'); 
 
    }; 
 
    
 
    $('#has-popover').popover({ 
 
     content: 'Popover content', 
 
     trigger: 'manual' 
 
    }) 
 
    .focus(showPopover) 
 
    .blur(hidePopover) 
 
    .hover(showPopover, hidePopover); 
 
    
 
    $('#no-popover').on('change',function(){ 
 
debugger; 
 
$('#has-popover').popover('show'); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"/> 
 

 
<input id='no-popover' type='text' placeholder='write here something to popover on next textbox'/> 
 
<input id='has-popover' type='text' placeholder='hover or focus me' />

источник

2017-05-03 07:14:38

Bootstrap popover появляется над другим элементом, чем его триггер.

ответ

Смежные вопросы