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
Related
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();
});
I have a table being built via the map function of JavaScript (ReactJS).
On the last column, I should be having buttons that are meant to open a popover that will (eventually) hold some information. This cell is being done like this:
<td>
<div>
<button className="btn btn-primary"
tabIndex="0"
role="button"
data-toggle="popover"
data-trigger="focus"
title="Details"
data-content="Testing, Testing">
<b>IN PIT</b>
</button>
</div>
</td>
So far, the said button appears, but no popover whatsoever. I'm not using npm or anything of the sorts since I'm not a front-end-designer myself, and that doesn't seem trivial to setup. I just want something "good enough" for testing purposes.
What am I missing?
Looking at your https://pastebin.com/KuRHjWxr. Popovers won't work, you have to implement them other way.
You initiate
$('[data-toggle="popover"]').popover();
$('[data-toggle="tooltip"]').tooltip(); when there are no buttons in DOM.
Call .popover() and .tooltip() after your buttons are successfully rendered to the DOM.
The names of your attributes imply that you are expecting bootstrap (an external library) to be loaded and attach to the element to provide functionality, is bootstrap included in a script tag on the page? Those attributes don't do anything themselves, they are just tags to attach actions to. Add a bootstrap cdn tag inside the bottom of the body tag to address.
Hello I am trying to use angular-strap to put together a multiselect drop down menu. For testing, I am just putting in some dummy data like so. THe issue is that the check mark on selected items displays on almost new line. I am not sure how to go about fixing it.
{value:'BLAH.09', label:'BLAH.09 '}
Couple of things to keep in mind:
1. The extra spaces in label are just a part of the troubleshooting process, it still doesn't work if they are there.
2. The reason the box is so wide in the screenshot is because I manually adjusted the width in css to see if it makes a difference, it doesn't..
Button looks like this:
<button type="button" class="btn btn-default" ng-model="selectedIcons" data-html="1" placeholder="Category Filter" data-multiple="1" data-animation="am-flip-x" ng-options="val.value for val in display_data['fields']" bs-select> Action <span class="caret"></span></button>
Was missing an include to the main.min.css file.
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.