javascript - span - tooltip label bootstrap

Bootstrap popover no funciona

Question

El popover bootstrap no aparece en mi página

Aquí está mi HTML:

<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>

Aquí están todos los archivos js y css que he agregado:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/bootstrap.min.css")
@Styles.Render("~/Content/bootstrap.css")
@Styles.Render("~/Content/bootstrap-theme.css")
@Styles.Render("~/Content/css/default.css")

@Scripts.Render("~/Scripts/jquery-2.1.1.js")
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/bootstrap.js")

¿Puede alguien decirme dónde está el problema?

PD: ¿Hay alguna manera de hacer funcionar el popover sin tener que escribir ningún código de script?

Answer 1

Aunque la respuesta aceptada es correcta, cuando se trata de popovers, tenga cuidado con las situaciones con doble inicialización también (ejemplo de Fiddle ). El siguiente JavaScript fallará.

<br/>
<br/>
<a href="#" id="firstButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Working)</a>
<br/>
<br/>
<a href="#" id="secondButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Failing)</a>

Si realiza una doble inicialización y su popover usa valores que pueden cambiar o contenido personalizado, etc., estará en un mundo de dolor:

$(function () {
    $(''#firstButton'').popover({
      container: "body",
      html: true,
      content: function () {
        return ''<div class="popover-message">'' + $(this).data("message") + ''</div>'';
      }
    });
    $(''#secondButton'').popover(); // <-- The first initializer does this, which causes the next one to fail on the next line.
    $(''#secondButton'').popover({
      container: "body",
      html: true,
      content: function () {
        return ''<div class="popover-message">'' + $(this).data("message") + ''</div>'';
      }
    });
});

Answer 2

De los Documentos sobre Popovers :

Funcionalidad de inclusión:
Por razones de rendimiento, Tooltip y Popover data-apis son opcionales, lo que significa que debe inicializarlos usted mismo .

Entonces debe llamar a .popover() manualmente en JavaScript de esta manera:

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

O puede usar cualquier selector que desee

Aquí hay un ejemplo usando StackSnippets.

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

body {
  padding: 50px;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<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>

Nota : Esto es similar a la respuesta a Bootstrap Tooltip Not Showing Up