I'm using a bootstrap tooltip within an angular ng-repeat - its ok except I cant see how I can change the position of the actual tooltip, by default it will popup centred above the icon but I'm looking to have it left aligned from the icon - see image to see what I mean...
how to change bootstrap tooltip alignment
I cant hardcode it as such, as it will be available on separate columns on the same row, so I cant say in CSS its 80px from the left of screen ...typically (its never that easy)...
:-)
if you have any advice...appreciated- thanks
try use attribute "data-placement", Example:
Hover
Here doc tooltip Bootstrap:
http://getbootstrap.com/javascript/#tooltips
Related
I am using this template https://coreui.io/v1/demo/pro/AngularJS_Demo/#!/dashboard for my angular project. In that it includes chart.js and angular-chart.js. After good amount of googling, I am still not able to get the tooltip in the chart above all element presents.
In all the other product of coreui it shows properly. But I am not sure why it not showing here. Please help me.
Looking at the source code, it seems they are using ChartJs for the charts.
ChartJS should automatically find the right position for your tooltips, but since the chart area is so small, the tooltip would look cut-off when it has a top position too. Try increasing the area around the chart to give the tooltip some more space. Because all the other examples in your dashboard have larger charts/containers, the problem happens only in the small boxes.
When you want to have some more power over the tooltip, you can also switch to HTML tooltips so the tooltip will be added outside of the canvas, and can be configured through CSS (like Z-index).
I am using angular-material in my project.
I have requirement in which I have to show left and right arrow automatically that will indicate there is scroll horizantally.
as you can see in the picture.
You can use for it one of the angular carousel modules. Like this.
Or one of the list
I'm working with an angular strap dropdown and i want it to stay on screen when it is shown. problem described in the picture.
http://i.imgur.com/cznMsAw.gifv
The dropdown takes in an placement attribute which can be set to auto to help it stay on screen but it isn't good enough because it only calculates from the parent element not the screen width and height.
This can been seen in the code in the tooltip module
https://github.com/mgcrea/angular-strap/blob/master/dist/angular-strap.js#L1067
Line 4416 to 4454
does anyone have a solution to this problem.
I am trying to create a masonary style layout using isotope. The layout must be a responsive grid with flexible columns. However each grid item has an hidden text element which opens when the image is clicked. This text will come from wordpress and therefore as an unknown length. I am trying to use the
.isotope("reLayout");
function to reset the layout when the item is toggled however it does not work. If you alter the size of the browser when the text is visible you can see that that the isotope layout kicks back in and gives the desired effect.
I have created a codepen to illustrate my issue. Any help would be appreciated
http://codepen.io/GlynnJohnson/pen/bLBCJ
Thanks
You need top use:
$container.isotope("layout");
Not
$container.isotope("reLayout");
Codepen
I am looking for align the Angular Multiselect from the bottom.
Problem is activating that dropdown will display it beneath the clickable trigger, no matter where on the screen it is. If the trigger is at the very bottom of the page, when clicked the dropdown will increase the page height, and the user will have to scroll down again to see the rest of the dropdown
code link
Thanks.
There is a dropup feature in bootstrap.
Referece: http://getbootstrap.com/components/#btn-dropdowns-dropup