Uma alternativa sem precisar usar o attr
seria o próprio data()
do JQuery.
De acordo com a documentação:
Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.
No seu caso, fica algo como:
$("#botao").on("mouseover", function() {
$(this).data("trigger", "hover")
.data("toggle", "popover")
.data("placement", "bottom")
.data("content", "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.")
.data("original-title", "Popover Title");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary" id="botao">
Passe o mouse
</button>
Utilizando o data()
seu HTML fica mais limpo, uma vez que esses dados não aparecem no formato data-*
. Tudo fica salvo em memória associada aquele elemento específico.
Pra poder utilizar depois os dados salvos basta usar o próprio método data()
com o primeiro parâmetro sendo o a "chave" para acessar o dado armazenado.
$("#botao").data("trigger"); // retorna 'hover'
UPDATE
Para refletir a mudança da pergunta, para colocar os dados dentro de span
e não dentro do button
, basta utilizar a função find()
.
Fica assim:
$("#botao").on("mouseover", function() {
var myspan = $(this).find("span");
myspan.data("trigger", "hover")
.data("toggle", "popover")
.data("placement", "bottom")
.data("content", "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.")
.data("original-title", "Popover Title");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="botao">
Passe o mouse
<span>Reunião Urgente</span>
</button>
Nesse momento, quem está recebendo os dados são a tag span
, não o botão.
OBS: Se existir mais de uma tag span
dentro do botão, a variável myspan
conterá referência a todos os span
capturados.
Caso queira utilizar o recurso popover
do bootstrap, deve executar o popover
sempre depois de ter personalizado a tag com os dados que você quer.
Ou você pode rodar o popover
com seus próprios options
.
Vejamos:
$("#botao").on("mouseover", function() {
var myspan = $(this).find("span");
myspan.popover({
placement: "bottom",
content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.",
trigger: "hover"
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button id="botao">Passe o mouse <span> Reunião urgente </span>
</button>
Dessa forma você consegue adicionar o popover em tempo de execução.
Espero ter ajudado.