Button w popover (bootstrap, albo i bez)

pytanie zadane 30 września 2020 w HTML i CSS przez Dzango111 Użytkownik (660 p.)

Chciałbym mieć guzik w popoverze bootstrapowym, znajdowałem tylko odpowiedzi z frameworkami vue czy angular, zaś te bardziej "na czysto" mi nie działają.

<button type="button" class="btn btn-lg btn-danger" 
  data-toggle="guzik" 
  title="tytuł" 
  data-content="treść">
  <img src="{{x_nas.obraz_nasiona.url}}" class="zdj">
</button>

$(function () {
   $('[data-toggle="guzik"]').popover()
})

Czy da się w ogóle zrobić, żeby w 'treści' był działający button?

1 odpowiedź

odpowiedź 30 września 2020 przez kukulim Mądrala (6,440 p.)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Bootstrap Popover with Close Button</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top',
        html : true,
        title : 'User Info <a href="#" class="close" data-dismiss="alert">&times;</a>',
        content : '<div><button class="btn btn-info">button</button></div>'
    });
    $(document).on("click", ".popover .close" , function(){
        $(this).parents(".popover").popover('hide');
    });
});
</script>
<style>
	.bs-example{
    	margin: 200px 150px 0;
    }
    .popover-title .close{
        position: relative;
        bottom: 3px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary" data-toggle="popover">Click Me</button>
</div>
</body>
</html>

komentarz 30 września 2020 przez Dzango111 Użytkownik (660 p.)

Coś pięknego

komentarz 1 października 2020 przez Dzango111 Użytkownik (660 p.)

@kukulim, Niestety nie działa dla bootstrapa 4.3.1

komentarz 1 października 2020 przez kukulim Mądrala (6,440 p.)

Chyba jakiś issue w wersji 4.1.3 jeszcze działało:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Bootstrap Popover with Close Button</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'right',
        html : true,
        title : 'User Info <a href="#" class="close" data-dismiss="alert">&times;</a>',
        content : '<div><button class="btn btn-info">button</button></div>'
    });
    $(document).on("click", ".popover .close" , function(){
        $(this).parents(".popover").popover('hide');
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary" data-toggle="popover">Click Me</button>
</div>
</body>
</html>