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.
Let me test it for you
– Renan Rodrigues
I updated my question look there
– Renan Rodrigues
@Renanrodrigues, as you have done so far, put the code. The example I put did not work?
– LocalHost
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
– Renan Rodrigues