The problem is that tooltip is in wrong place - on far left side. So for instance when I hover element with tooltip that is on right side of the screen it will show tooltip on the left side far away from the hovered element. I could't find anything useful on the topic so far. Tried different options, but all tooltips were displayed on the left. Code for my tooltip copied from official foundation page
<button class="button has-tip" type="button" data-tooltip aria-haspopup="true"
data-disable-hover="false" tabindex="1" data-position="top"
title="Fancy word for a beetle." data-alignment="center">
Top Center
</button>
What version of Foundation are you using? Here is a jsfiddle with your HTML using Foundation 6.4.1, and it works fine. The only thing I changed was to add a margin on the button to allow the tooltip to position on top. https://jsfiddle.net/genestd/svygwghz/
<div>
<button class="button has-tip center" type="button" data-tooltip aria-haspopup="true" data-disable-hover="false" tabindex="1" data-position="top" title="Fancy word for a beetle." data-alignment="center">
Top Center
</button>
</div>
.
.center{
margin: 100px;
}
Related
I'm using Angular6 with angular-cli-6.0.8.
While using matTooltip then on mouse hover I'm getting the component(header) position change And mouseOut it's normal behaviour.
The following is the code:
<div #HeaderMenu>
<div id="headerMenu" *ngIf="isHeaderButtonOpenStatus" style="display:block">
<div class="right-h" *ngFor="let head of commonService.AllHeaderRoutingList">
<a [routerLink]="head.routerLink">
<img class="addOnBtn" [id]="head.id" [src]="getSource(head)" [matTooltip]="head.title" (click)="setActive(head.id, head.source, head); toggleHeader()" />
</a>
<div [ngStyle]="{'background-color': head.isRouter ? '#0074BA' : '#232323' }" matTooltip="Pin to the top" (click)="setHeaderRouting(head)" class="isRouter"> </div>
</div>
</div>
</div>
So if you see in the above code on mouse hover on element <a ...</a>and <div [ngStyle]....</div>
Totally <div #HeaderMenu> ....</div> is little bit shift from top to down.In other word creating blank space on top of the header(Please see the below image).
on Mouse hover on Image button header Component position change
Please any help.
Use mdToolTip= "{{ your ngFor expression}}".
My hyperlink at the end looks fine. But the first "button", which is an input of type submit, looks bad with Bootstrap. I do not see the image on the button.
Actually, I guess I have to use the submit button with razor but how can I get back my nice button style from Bootstrap? There is no icon visible!
<input type="submit" class="btn btn-default fa fa-save" id="saveTeststeps" />
Looks good, the icon is visible:
<a class="btn btn-default" href="#"><i class="fa fa-plus"></i></a>
Try this :
<button class="btn btn-default" type="submit" id="saveTeststeps">
<i class="fa fa-plus"></i>
</button>
The icon classes are not intended to be applied alongside other classes, such as those for buttons. Specifically, the icon classes do things like hide text, and also have their own padding, height, line-height, etc. definitions. If you need to use an icon in a button, use the button element with an i element inside. In general, you should avoid inputs for buttons, though. HTML should have never allowed that in the first place, as it confuses the purpose of the element: rendering a user input control, which a button is technically not.
When adding an ui-icon element to a jquery dialog, something weird is displayed instead of the requested icon - (check here for an example: http://jsfiddle.net/aE2Fb/)
It seems like ui-state-default somehow hides the actual icon, because if I remove it, then icon shows up ok. Note that same issue occurrs with ui-state-hover as well.
<div id="dialog" title="Basic dialog" class="">
<span class="ui-icon ui-state-default ui-icon-plusthick ui-corner-all" ></span>
</div>
$(function() {
$( "#dialog" ).dialog();
});
Similar topic was discussed here:jquery ui Portlet : incorrect effect on hover ( ui-state-hover ), but the "fix" was not explained at all and therefore its not really clear, what is going on...
When you put the div into a jQuery UI dialog, you add a load of extra parents, and extra classes - with the result that the icon image file you wanted is getting over-ridden twice.
The first override is from the css for the standard widget background image, which also sets the image position to '50% 50%' - so putting the middle of the image in your button. This then again gets over-ridden back to the correct icon image file, but without any position settings - so you end up seeing the middle of the icon image in your button.
Try putting the icon span inside another container, and move the ui-state-default and ui-corner-all classes to the container instead:
http://jsfiddle.net/7CLL6/
<div id="dialog" title="Basic dialog" class="">
<span class='ui-state-default ui-corner-all'>
<span class="ui-button ui-icon ui-icon-plusthick"></span>
</span>
</div>
I want to have 2 buttons in the footer, one on the left side and the other on the right side.
With dataposition fixed, however right side button going little outside the page view.
Here is the code.
<div data-role="footer" data-theme="d" class="ui-bar" style="height:30px" data-position="fixed">
<a class="ui-btn-left" data-role="button" data-theme="a" id="approvetm">
Approve
</a>
<a id="sendback" data-rel="popup" data-theme="a" class="ui-btn-right" data-role="button" data-inline="true">Send Back</a>
</div>
Can you please tell me what is wrong in above code.....?
As per jQuery Mobile documentation footer is different than header in terms of buttons accommodation.
The page footer is very similar to the header in terms of options and configuration. The primary difference is that the footer is designed to be less structured than the header to allow more flexibility, so the framework doesn't automatically reserve slots for buttons to the left or right as it does in headers
However, this can be fixed by overriding ui-btn-right style (right position).
.ui-footer .ui-btn-right { right: 35px !important }
Demo
I'm trying to put a help icon from jquery ui next to a input field. I get a button with a question mark but no effect when I hoover over it.
<span class="ui-state-default ui-corner-all ui-icon ui-icon ui-icon-help"></span>
Also, the questionmark is not yellow like is not yellow like it is in the demo. I have all the files.
What am I missing?