Question

24

Why does my Bootstrap popover not work?

rated 0 times [ 28] [ 4] / answers: 1 / hits: 43118 / 9 Years ago, tue, may 5, 2015, 12:00:00

I'm trying to use the Bootstrap popover. So I copied the exact code from the example into my website, which unfortunately doesn't work. I pasted the full code below and created a jsfiddle here.

I tried putting it in a bootstrap container and in rows and columns, but nothing seems to work.

Does anybody how I can get that fiddle to work? All tips are welcome!

<!DOCTYPE html>

<html lang=en>

<head>

    <script src=//code.jquery.com/jquery-1.11.1.min.js></script>

    <script src=//code.jquery.com/ui/1.11.2/jquery-ui.min.js></script>

    <link href=//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css rel=stylesheet>

    <script src=//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js></script>

</head>

<body>

<button type=button class=btn btn-lg btn-danger data-toggle=popover title=Popover title data-content=And here's some amazing content. It's very engaging. Right?>Click to toggle popover</button>

</body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

albert

Add To Favorites

Follow

Total Points: 652

Total Questions: 105

Total Answers: 108

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

albert questions

1 MUI v5 - Extending Typography variant in TypeScript creates error No overload matches this call

Wed, Nov 17, 21, 00:00, 3 Years ago

1 Update one, insert if not exists and modify only when a condition is true MongoDB

Thu, Mar 19, 20, 00:00, 4 Years ago

1 React - input loses focus on keypress

Sat, Nov 9, 19, 00:00, 5 Years ago

1 Multiple select fields filtering with jQuery

Thu, Oct 24, 19, 00:00, 5 Years ago

1 How to update redux state using a react variable passed up to the component from a child

Wed, Sep 25, 19, 00:00, 5 Years ago

View All

answered 9 Years ago calicinthias · Accepted Answer

You forgot this :
https://getbootstrap.com/docs/3.4/javascript/#callout-popover-opt-in

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

$(function () {

    $('[data-toggle="popover"]').popover()

})