Trying to add a tooltip to a font awesome icon in an Angular page. The normal Bootstrap method seems to be ignored so I am trying to use the NGBootstrap method used for adding a tooltip to buttons, but the tool tip never displays. https://ng-bootstrap.github.io/#/components/tooltip/examples
The typical Bootstrap method causes an error of Cannot set property 'title' of undefined when hovering.
<i class="fa fa-info-circle" data-toggle="tooltip" title="Name here"></i>
In the component:
ngafterviewinit() {
$(function() {
$('[data-toggle="tooltip"]').tooltip();
}
};
You can also try using button tag.
<div class="infoCSSClass">
<button class="icon-info" data-container="body" ngbTooltip="Here is tooltip text" #toolTip="ngbTooltip" (click)="toolTip.open()" placement="top"></button>
</div>
This seems to work:
<i id="icon" class="fa fa-1x fa-info-circle" [ngClass]="icon" aria-hidden="true" placement="right" ngbTooltip="tipContent"></i>
Related
I am trying to display content when hovering over an icon.
When I hardcode it in my HTML it works fine.
But when I try to render the same thing through javascript, nothing happens on hover.
So this works when written in HTML directly:
<i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body"
data-toggle="popover"
data-html="true"
data-content="hello"i>
This does not work
<!--html-->
<i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body"
data-toggle="popover"
data-html="true"
i>
<!--javascript-->
document.getElementById("iconid").setAttribute("data-content", "hello");
When I inspect the rendered code, everthing seems exactly the same in both cases, but in 2nd case nothing happens on hover.
Thanks for any help!
If you use bootstrap, you might want to call popover event manually after manipulating element by JS.
$('[data-toggle="popover"]').popover()
I think issue is, by the time you call your JS manipulation, bootstrap already finished binding events for the elements. So it got left behind.
I struggled to set a onclick event for the icon for a while.
<div className="favorite">
<i id="favorite" className="fa fa-star-o fa-2x" onclick={this._toggleFaviriteStatus}></i>
</div>
_toggleFaviriteStatus() {
alert("aaa")
console.log(this.state);
}
When I click the icon, the call back is never called.
I followed the solution in here, but I am not sure why it does not work..
How to put an onClick event on an font awesome icon in react?
Can I get some help?
Thanks!
Simply use the onclick with the div tag
<div className="favorite" onClick={this._toggleFaviriteStatus}>
<i id="favorite" className="fa fa-star-o fa-2x"> </i>
</div>
In my Angular program, I want to display a string of text that says what the button does whenever you hover over the button.
How do I do this?
My mouse is hovering over the google button.
Here's my html code for one of my buttons if it helps:
<button [disabled]="!isDisabled" name="enable" class="btn btn-default btn-margin" (click)="toggleDisabled()"><i class="fa fa-pencil" aria-hidden="true"></i></button>
You can use title
<button [disabled]="!isDisabled" name="enable" class="btn btn-default btn-margin" (click)="toggleDisabled()" title="Something"><i class="fa fa-pencil" aria-hidden="true"></i></button>
did you try the title attribute?
title="hello world"
example here
http://w3schools.com/tags/tryit.asp?filename=tryhtml5_global_title
add
title="my tooltip text"
or
[title]="aPropertyWithTooltipContent"
see also tooltips for Button
I'm working on a project where ng-cloak is unavailable due to the way the css files are loaded, so I'm looking for a less worse solution and have tried a few different things.
I never want to show these two icons at the same time. The problem is, the bottom one (angle right) shows up briefly since the promise for the data source is still resolving. How can I make sure these two icons will never show up at once?
<i class=" fa invalid-data-icon fa-angle-down" ng-hide="vm.hideInvalid"
ng-show="vm.data.datasources.length">
</i>
<i class="fa invalid-data-icon fa-angle-right" ng-show="vm.hideInvalid"
ng-hide="vm.data.datasources.length">
</i>
EDIT:
went with this from the accepted answer:
<i class=" fa invalid-data-icon fa-angle-down" ng-class="{'rotate-icon':vm.data.datasources[1].length==0 || vm.hideInvalid}"></i>
First using but ng-show and ng-hide in the same tag is a pretty bad idea.
You should do something like :
<i class=" fa invalid-data-icon fa-angle-down"
ng-show="vm.hideInvalid==false && vm.data.datasources.length==0">
</i>
<i class="fa invalid-data-icon fa-angle-right"
ng-show="vm.hideInvalid==true && vm.data.datasources.length==0">
</i>
Considering that as long your promise is not resvoled you would have initialize hideInvalid and datasources to undefined.
Alternative approach: Only use one icon in your code, and rotate it with a css class:
<i class=" fa invalid-data-icon fa-angle-down" ng-class={'rotate-icon':!!vm.data.datasources.length}></i>
(my Angular skills are a bit rusty, but you get the jist...)
Then in your CSS, something like this:
.rotate-icon {
transform: rotate(-90deg)
}
I wanted to implement bootstrap glyphicon edit but its not showing in my web page though its showing in bootply Please see this jsfiddle I have included all the necessary js and css.This is the code
From the bootstrap
to show edit glyphicon <a class="glyphicon glyphicon-search" id="edit"></a>
You are using bootstrap 2.2 so the icon prefixes are icon-* not glyphicon-*
<a class="icon icon-search" id="edit"></a>
In bootstrap 3. the prefix got changed to glyphicon-**