2

Preciso adicionar tags data ao meu button quando passo o mouse sobre ele, ja consegui pegar o movimento de mouse hover agora preciso adicionar as tags, que são:

data-trigger="hover" 
data-toggle="popover"
data-placement="bottom"
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
data-original-title="Popover Title"

Então meu button no final deve ficar assim:

<button class="btn btn-primary" data-trigger="hover" data-toggle="popover"
        data-placement="bottom"
        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        title="" data-original-title="Popover Title">
   Meu botão
</button>

e

O $(this) acessa o dom de meu botão. Porem preciso colocar o link na tag span como na imagem ascima.

Meu código esta assim:

eventMouseover: function(event, jsEvent, view){
  $(jsEvent).attr("data-trigger","hover");
  $(this).attr("data-toggle","popover");
  $(this).attr("data-placement","bottom");
  $(this).attr("data-content","Vivamus sagittis lacus vel augue laoreet rutrum faucibus.");
  $(this).attr("ata-original-title","Popover Title");
}

Eu preciso que os atributos seja adicionados ao filho do $(this) pois o $(this) é a tag a, e o que precisa receber é o filho de a, span

2 Respostas 2

2

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.

8
  • Brother me ajuda aqui, o $(this) está indo na tag a, porém preciso coloca-la no span que fica dentro do a, como faço isto ? Commented 10/01/2017 às 23:56
  • Utilizevar span = $(this).find("span");. Nesse momento você terá acesso ao span (mas lembre-se que dessa forma, se tiver mais de 1 span, a variável span terá referência a todos. Mas se for de acordo com o que você postou na foto, deve funcionar. Commented 11/01/2017 às 0:02
  • Funcionou, porém ainda não esta aparecendo o toolipop, tenho que verificar qual meu erro Commented 11/01/2017 às 0:13
  • Você precisa rodar o tooltip depois de ter adicionado os dados. Executar o tooltip antes e depois adicionar os dados não funciona mesmo. Uma dica, precisa mesmo adicionar os dados realmente em tempo de execução? Não pode ser antes? Manualmente? Commented 11/01/2017 às 0:14
  • É porque tudo é dinamico, não consigo montar o html antes mesmo disso, preciso monta e ja mostrar o toolpop Commented 11/01/2017 às 0:21
2

Seria isso?

$("#botao").on("mouseover",function(){
  $(this).attr("data-trigger","hover");
 $(this).attr("data-toggle","popover");
 $(this).attr("data-placement","bottom");
 $(this).attr("data-content","Vivamus sagittis lacus vel augue laoreet rutrum faucibus.");
$(this).attr("ata-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>

4
  • deixe eu testa para verificar Commented 10/01/2017 às 23:26
  • Atualizei minha pergunta olhe la Commented 10/01/2017 às 23:59
  • @RenanRodrigues, como você fez até agora, coloque o código. O exemplo que coloquei não deu certo?
    – LocalHost
    Commented 11/01/2017 às 0:04
  • Cara deu e não deu, o código esta adicionando, porém esta adicionando em lugar errado, na verdade meu $(this) não é quem precisa receber as tags e sim um dos filhos dele o span Commented 11/01/2017 às 0:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .