Adding data tags to the jquery button

Question

I need to add tags data to my button when I pass the mouse over it, I’ve managed to catch the movement of mouse hover now I need to add the tags, who are:

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

So my button at the end should look like this:

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

The $(this) access the gift of my button. However I need to put the link in the tag span as in the ascima image.

My code is like this:

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");
}

I need the attributes to be added to the child’s $(this) for the $(this) is the tag a, and what he needs to receive is the son of a, span

Answer 1

Would that be?

$("#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>

Answer 2

An alternative without using the attr would be the very data() jquery.

According to the documentation:

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.

In your case, it looks something like:

$("#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>

Using the data() your HTML is cleaner, since this data does not appear in the format data-*. Everything is saved in memory associated with that specific element.

To be able to use the saved data later just use the method itself data() with the first parameter being the "key" to access the stored data.

$("#botao").data("trigger"); // retorna 'hover'

UPDATE

To reflect the changing question, to put the data within span and not within the button, just use the function find().

Stay like this:

$("#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>

At this point, who is receiving the data is the tag span, not the button. NOTE: If there is more than one tag span inside the button, the variable myspan shall contain reference to all span captured.

If you want to use the resource popover bootstrap, must execute the popover always after you have customized the tag with the data you want. Or you can rotate the popover with their own options.

Let’s see:

$("#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>

This way you can add Popover at runtime.

I hope I’ve helped.