Adding data tags to the jquery button

Asked

Viewed 613 times

2

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>

e

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

2 answers

2

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>

  • Let me test it for you

  • I updated my question look there

  • @Renanrodrigues, as you have done so far, put the code. The example I put did not work?

  • Cara gave and did not give, the code is adding, but this adding in wrong place, in fact my $(this) is not who needs to receive the tags but one of his children the span

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.

  • Brother help me here, the $(this) is going in the tag a, but I need to put it in the span that is inside the a, how do I do this ?

  • Utilizevar span = $(this).find("span");. At this point you will have access to span (but remember that this way, if you have more than 1 span, the variable span will have reference to all. But if it is according to what you posted in the photo, should work.

  • It worked, but still not appearing the toolipop, I have to check what my error

  • You need to run the tooltip after you have added the data. Running the tooltip before and then adding the data doesn’t really work. A hint, do you really need to add the data at runtime? Can’t be sooner? Manually?

  • It’s because everything is dynamic, I can’t assemble html before that, I need to assemble and already show the toolpop

  • I get it, so do as I say. First add the data as @Localhost responded and only then run the tooltip. Alternatively, you can run the tooltip with options. $(this).find("span").tooltip({placement:"bottom", title:"Vivamus sagittis lacus vel augue laoreet rutrum faucibus."}); Hence, no need to worry about adding the data in HTML, already runs the tooltip according to your requirements (options).

  • Would it be possible to add this to the answer ?

Show 3 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.