do not close popover unless it is with the link

Question

do not close popover unless it is with the link

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

When I click outside the popover the popover closes, I do not want it to close

$(function() {
  // Enables popover
  $("[data-toggle=popover]").popover();


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a tabindex="0" class="btn btn-lg btn-primary" role="button" data-html="true" data-toggle="popover" data-trigger="focus" title="<div class='demo'>
            <div id='adentro'>
              hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhoooooooolaaaaaaa
            </div>
         </div>">popover</a>

javascript jquery bootstrap

asked by deluf 26.07.2017 в 17:32

source

2 answers

Error starting the Ruby on Rails server with 'rails s', in Linux Mint, by console (Bundler Error Backtrace) Protect folder in apache [closed]

score 2 · Answer 1

To enable only with the click, you should change the trigger to click , one way is how you added @lois, another is to add the constructor from Js.

Ejm

$("[data-toggle=popover]").popover({trigger: 'click'});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a tabindex="0" class="btn btn-lg btn-primary" role="button" data-html="true" data-toggle="popover" data-trigger="focus" title="<div class='demo'>
            <div id='adentro'>
              hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhoooooooolaaaaaaa
            </div>
</div>">popover</a>

score 1 · Answer 2

If you remove the data-trigger="focus" by clicking on it, you enable it and until you do not give it back to the element itself it is not hidden.

With Focus you are saying that it only appears when the button has the focus so that if you click on another site, it is hidden.

$(function() {
  // Enables popover
  $("[data-toggle=popover]").popover();


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a tabindex="0" class="btn btn-lg btn-primary" role="button" data-html="true" data-toggle="popover" title="<div class='demo'>
            <div id='adentro'>
              hhhhhhhhhhoooolaaaa
            </div>
         </div>">popover</a>