5
I am asking this because the application is almost ready and used a plug-in that uses the tag title. This plugin causes clicking on the element to open a popup (in this case a confirmation box), with a title bar using the title tag text.
However, when using the title tag this plug-in removes it from the element, making it impossible for the tooltip to appear when the mouse is over.
10
In the bootstrap page it is possible to read about the property data-title:
title default value if title attribute isn’t present
What does it mean:
The value of the title if the title attribute is not present.
This means that a solution would be to add the attribute data-title the elements that have the can with the same attribute value title.
You can do this via javascript before calling the startup function. Example:
$(...)
.each(function() { $(this).data('title', this.title) })
.popover(options);
1
You can use only CSS for building Tooltips, this way:
CSS
*{
font-family: Arial, sans-serif;
}
div > .tooltip, li > .tooltip, a > .tooltip, span > .tooltip {
opacity: 0;
visibility: hidden;
-webkit-transition: 0.3s;
-moz-transition: all 0.3s;
}
div:hover > .tooltip, li:hover > .tooltip, a:hover > .tooltip, span:hover > .tooltip,
a .tooltip:hover, span .tooltip:hover, li .tooltip:hover, div .tooltip:hover {
opacity: 1;
visibility: visible;
overflow: visible;
margin-top: -40px;
display: inline;
margin-left: -40px;
-webkit-transition: 0.3s;
-moz-transition: all 0.3s;
}
.tooltip {
background: #3378C1;
color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 10px;
margin-left: -40px;
position: absolute;
font-family: Arial;
font-size: 12px;
text-decoration: none;
font-style: normal;
z-index: 10;
}
.tooltip:before { /* Triangle */
content: "";
background: #3378C1;
border: 0;
width: 10px;
height: 10px;
margin-left: 5px;
margin-top: 20px;
display: block;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
display /*\**/: none\9;
*display: none !important;
*display: none;
}
**HTML**
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<br>
<br>
<p>Este é exemplo demonstrativo de utilização de
<a href="#"><strong>Tooltips</strong>
<span class="tooltip">
Clique aqui e abra este link
</span></a>
e com isto fornecer mais uma ferramenta para seu website.</p>
Take a look at the working example here.
This link has only the result, put in your answer the code and a brief explanation, the stackoverflow works different from a forum, a look at these guidelines: http://answall.com/help http://meta.pt.stackoverflow.com/questions/42/wewant to-responses-containing-only-links/133
Sorry for the ignorance, I explained the same example in Codepen: http://goo.gl/MoeUlT
I saw your code and found it very good. Congratulations! In the link the positioning of the box with the tooltip does not appear on top of the content, it is stuck in the left margin... this does not happen with vc?
0
You can customize the options when you initialize the Popover and return the title attribute to the original value.
$('a').popover({
container: 'body',
html: true,
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
content: function () {
$(this).attr('title', $(this).attr('data-original-title'));
return $(this).text();
},
placement: 'auto right'
});
Browser other questions tagged javascript jquery html
You are not signed in. Login or sign up in order to post.
Modify the plugin so that it uses another attribute other than
titlewould be a viable solution?– Guilherme Bernal
I thought about it. But at first I don’t know if it would be the most recommended. It’s the Bootstrap Popover.
– Joao Paulo