when I use data-toggle="tooltip" with the tag <h>, it works normally:
<h3 data-toggle="tooltip" data-placement="right"
title="example"> example </h3>
but when I try to use with <a>/<td>/<span>, this does not work normally, it just shows the normal tool-tip, without any style.
I'm starting with JavaScript and CSS, so I'm a bit stuck.
What can I do to solve this?
(I'm aware there are similar questions to this but they haven't solved my problem)
Thanks in advance.
It works for me: https://jsfiddle.net/fgcb27aa/
Check if you have tooltips enabled in your current page.
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
Related
I have a little trouble when I use .toggleClass in my code. Sometimes, it works, sometimes not. I have read many posts about it but none have helped me.
Can you help me, please?
jQuery
var e = $(".pwdMask > .form-control"),
t = $(".pwd-toggle");
$(t).on("click", function(t) {
t.preventDefault(),
$(this).toggleClass("fa-eye fa-eye-slash"),
$(this).hasClass("fa-eye") ? $(e).attr("type", "text") : $(e).attr("type", "password")
})
HTML
<div class="pwdMask">
<input type="password" class="form-control" name="_password" placeholder="(...)" }}">
<span class="focus-input"></span>
<span class="fas pwd-toggle fa-eye fa-eye-slash"></span>
</div>
I call jQuery, Bootstrap.js and my custom.js files at the end of the HTML page.
I already thank you!
Remove one class your HTML
<span class="fas pwd-toggle fa-eye-slash"></span>
https://jsfiddle.net/lalji1051/2uwcda5b/3/
Fixed.
The problem was that I had 2 times each scripts because I closed the TWIG tag wrongly.
If it happens to somebody one day, don't forget to close body blocks before using javascript blocks.
I am adding attributes to element and it has styling to it. So I was able to add the html tags inside of ``. It is working sometimes and sometimes not.
When it is working:
$('.card-text')
.text((size_avg).replace(/G/,'B'))
.attr({
'data-html': "true",
'data-original-title': `<strong><u>Size: </u></strong> Number of Subscribers, <strong>`+ addCommas(Math.round(size_avg)) + `</strong>`
});
The result for this is:
Size: Number of Subscribers, 11.5
This works fine
But when I do this:
$('.card-text')
.text(Math.round(act_sub).replace(/G/,'B'))
.attr({
'data-html': "true",
'data-original-title': `<strong>yoyoyo</strong>`
});
The result for this:
<strong>yoyoyo</strong>
Why is my code not working at the second time?
This is silly, but it is working for the second one when I add data-html="true" at the HTML part of the code instead of adding it to the JS.
HTML Code:
<p class="card-text lg-metric-val" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true">-</p>
And make the JS code:
$('.card-text')
.text(Math.round(act_sub).replace(/G/,'B'))
.attr({'data-original-title': `<strong>yoyoyo</strong>`
});
Its dumb but it is working. I don't know why it was working passing it as a jQuery attribute in one part of the code and not the other.
Thank you everyone!
Greetings everyone :)
My question pertains to the bootstrap tooltips. I have a bunch of tooltips within my page (5 to be exact).
The tooltips look (more or less) like this:
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="{{'calculation.ttSD' | translate}}"></span>
I initialize them at the very top of the page (right after the ) with the classic:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Most tooltips are initialized without any problems, however 2 are not working properly. There are some parts of the page that are hidden as the page loads and revealed depending upon what the user has entered.
Example:
<tr ng-if="condition == 'true'">
<label data-translate="the.text.to.put.in.the.label"/>
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" tittle="someText">
...
These tooltips are not getting initialized properly at the beginning. As a quick fix i just copied the above javascript and placed it right after the tooltips, which works. Except that kills the DRY principle since the same exact js comes up 3-4 times within the page.
What is a better way (if there is a way at all) of initializing all bootstrap tooltips, regardless if hidden or not?
Thanks :)
ng-if prevents DOM Element from being rendered. Hence the initialization in document.ready will not take effect on your ng-if false elements
Instead you can use ng-show/ ng-hide as they only changes display css-poperty
modified your example to ng-show instead of ng-if
<tr ng-show="condition == 'true'">
<label data-translate="the.text.to.put.in.the.label"/>
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" tittle="someText">
hope it helps
I tried to make a Bootstrap popover. For that I have written the following code as per the Bootstrap guide.
I am using Bootstrap 3.1.0.
<input id="shelfLifeField" type="text" placeholder="Use-By" class="form-control first" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" data-content="<div class='row'>this is just for text</div>"/>
It's working fine but the problem was popover content appending to body. I found in the Bootstrap documentation that I can control through the data-container attribute.
data-container="#anotherDivId"
Actually I want to append the popover content to specific div ("anotherDivId") instead of appending to body.
I failed with my idea so can anyone help me.
Thanks.
data-container="#anotherDivId" is right and should work.
Be careful though that if #anotherDivId is hidden (with display:none), then the popover won't work
I've been working on a project using Prototype, jQuery and Bootstrap. We use Bootstrap Tooltips in our UI, normally over icons and text, as below:
<span class="glyphicon glyphicon-asterisk" data-toggle="tooltip" data-placement="bottom" title="Some tooltip"></span>
<span class="glyphicon glyphicon-asterisk" data-toggle="tooltip" data-placement="bottom" title="Another tooltip"></span>
Link tooltip
We then use some simple Javascript to activate our tooltip:
var _j = jQuery.noConflict();
_j("[data-toggle=\"tooltip\"]").tooltip();
I'm using _j alias of jQuery as the $ prefix is used by Prototype. This works fine, but as soon as you move your mouse from a tooltip'd element, it has style="display: hidden; applied. I can't work out any reasonable explanation, so was wondering if anyone has any ideas?
Here is a jsFiddle.
use this trick to solve the problem:
$('.tooltips').tooltip().on('hidden.bs.tooltip', function(){
jQuery(this).show();
});
You could use display:block !important within your CSS file. Doing this, it will force the element to show, even when the script is telling them to hide.