I want to bold some contents in the popup. But is not interpreted instead is being displayed among the content
Is there any other way, leaving matToolTip to provide popup over hover in Angular
<button [matTooltip]="help|translate" type="button" mat-button class="button-save" [disabled]="!isInfoAvailable">
<mat-icon>help_outline</mat-icon>
</button>
Expected output
firstname mike
lastname ross
Actual output
<b>firstname <\b> mike <\n>
<b>lastname <\b> ross
I think native Angular Material Tooltips don't allow HTML code, so I suggest you to use an other provider for the Tooltips, there are a lot of those who allows HTML code like ng-bootstrap or tippy.js
I personally suggest you to use Tippy.js, here's the link where you can see how use HTML code on it.
https://atomiks.github.io/tippyjs/#html-content
Hope it helps you.
If you need simple customization (changing background-color, color, font-size...) for the whole tooltip you can read this post otherwise you can read this answer ⬇️
A similar post already exists: Angular 2 Material tooltip with HTML content in angular
What you are looking for is a Popover. And as said, it doesn't exist now and it's not possible with tooltips.
Answer from #jelbourn, Angular member team:
When designing the tooltip we deliberately decided not to support
this. The Material Design spec is rather prescriptive about only text
appearing in tooltips. Rich content also presents a challenge for
a11y.
Source: https://github.com/angular/components/issues/5440#issuecomment-313740211
You can find the feature request for popover here.
Until an official release from Material team you can use an alternative. Here are some examples:
https://github.com/joejordanbrown/popover (documentation here)
https://github.com/ncstate-sat/popover
https://github.com/maxisam/ngx-mat-popover (using Material Menu)
https://ng.ant.design/components/popover/en (ng-zorro lib)
Related
I am using Vue Material Design Icons ref, and they automatically have a title attribute set - by default it is a human readable form of the icon's name, e.g. Plus Icon. Because this is being imported directly from the Node Package, I don't want to mess with the components themselves. I also know that I could write some custom JS to fix it, but I don't really want to do that.
Is there a standard way to disable the title attribute during component registration or in some other fashion that doesn't add a performance cost or require any patchwork code?
note: I'm also using Webpack if this can be done that way.
From the link you've provided, that icon component provides a prop where you can set the title to whatever you wish if you don't want to use the default.
Props
title - This changes the hover tooltip as well as the title shown to screen readers. By default, those values are a "human readable"
conversion of the icon names; for example chevron-down-icon becomes
"Chevron down icon".
Example:
<android-icon title="this is an icon!" />
I got some problems implementing typeahead.js
Current setup:
I use Bootstrap v.3.3.7
I implemented jQuery 3.2
I downloaded the typeahead.bundle.min.js v.0.11.1 from Github
I added the JS file to my project and linked it on the
I implemented the typeahead stuff as described in their docs here
I added (an empty CSS) class named .typeahead to init the JS stuff
NOTE: All the typeahead stuff (live-search) works great, but typeahead destroys my css.
-
My working Pug/Jade searchbar:
.flipkart-navbar-search.smallsearch.col-xs-12.qSearchBar(style="margin-left:30px;margin-top:15px;")
.row
input.flipkart-navbar-input.col-xs-11(type='text' id="searchInput" placeholder='Übungen suchen...' autofocus)
button.flipkart-navbar-button.col-xs-1
svg(width='15px' height='15px' fill="white")
path(d='.....')
Result:
-
The code, when I add the .typeahead class to let it init typeahead (also gave it some random other names, the classname is not relevant):
.flipkart-navbar-search.smallsearch.col-xs-12.qSearchBar(style="margin-left:30px;margin-top:15px;")
.row
input.flipkart-navbar-input.col-xs-11(type='text' id="searchInput" placeholder='Übungen suchen...' autofocus).typeahead
button.flipkart-navbar-button.col-xs-1
svg(width='15px' height='15px' fill="white")
path(d='.....')
Results in:
-
Why is that? I mean of course typeahead brings its own classes like tt-hint e.g. to display the results - but these aren't any problem. Why does typeahead actually make my searchbar look like this.
This happens because like most JS/jQuery plugins, typeahead.js also modifies the DOM structure of the elements that it works on.
So, the updated DOM after initialisation of typeahead would not be the same as what you wrote in your html or jade. Your existing CSS rules may or may not apply to this new DOM structure as intended now.
Solution
You need to update your CSS rules, so they target the updated DOM after initialisation of typeahead.js.
To view the updated DOM, you can use inspect element feature of browsers or developer tools etc to view the DOM structure in real time.
<button type="button" onclick="alert('ex.HELLO')">PRESS ME</button>
-------------------------
need help with this
I want to customize the alert box that appears when I press a button, how?
There is no ability to customize the styling or css of an 'alert', the default visuals for this is down to the system/browser interpretation of this.
You can however create your own Modal/Alert (how to here: https://www.w3schools.com/howto/howto_css_modals.asp)
If your site includes Bootstrap, you can just use theirs which offers the ability to customize it with their helper classes and if needed your own CSS. http://getbootstrap.com/javascript/#modals
I have written my own table module. Calling it in HTML code looks like this:
<my-table [data]="variableWithArr"></my-table>
Now, pretty nice table is being displayed. Cool. But what if I want to have a progress bar in some column of table? I thought that I could put a HTML code with component selector as value, for example bootstrap progressBar, like this:
for(let record of variableWithArr) {
record[0] = '<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>';
}
Unfortunatelly, Angular displays only a HTML code but dooes not interpret it as component selector, so I receive something like that in DOM:
<td><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></td>
How to fix it?
This is not how Angular works - you can't insert arbitrary HTML (innerHTML or otherwise) and expect that directives will be picked up & applied. Making Angular work this way would require shipping entire compiler to a browser and would defeat the whole purpose of all the great optimizations that can be done with the ahead-of-time (AOT) compilation.
tl;dr; nope, you can't do this and this has nothing to do with the ng-bootstrap project, but rather with design decisions behind Angular.
By looking at the docs you need to use the property [innerHTML], but to be clear only use it when you trust the code!!
So should be something like this:
<td [innerHTML]="record"></td>
I have my own design for a Twitter feed and I want to style the default feed using my own design. Is there a way to do that?
The issue is that you can't use the CSS selectors because it appears only after the loading the page.
Please check this pic to give you more idea about what I need
Thanks,
Well, You can customize Your twitter widget by doing something like this:
Default Code
<a class="twitter-timeline" href="Pagelink" data-widget-id="Page ID">Tweets by #Test</a>
To remove Header footer, Just add data-chrome="nofooter transparent noheader transparent" and it will look something like this:
<a class="twitter-timeline" href="Pagelink" data-widget-id="Page ID" data-chrome="nofooter transparent noheader transparent">Tweets by #Test</a>
For more customization like link color, Borders etc refer to this article. https://dev.twitter.com/docs/embedded-timelines#customization
I hope this helps :)
1# Getting a fully customisable timeline like suggested earlier (by using the API), would require that you fetch the timeline as a json file (https://api.twitter.com/1.1/statuses/home_timeline.json) and manually loop them in your display. More details here https://dev.twitter.com/rest/reference/get/statuses/home_timeline
2# This is as close as I could come with your design #shadeed9. Most of the restrictions are here https://dev.twitter.com/overview/terms/display-requirements
3# This JS snippet will let you add custom CSS styles to the Twitter embed widget: https://github.com/kevinburke/customize-twitter-1.1 by Kevin Burke
If this solves your question, kindly accept it!
If by twitter widget you mean the embedded timelines, then see the "client side options" section of the docs https://dev.twitter.com/docs/embedded-timelines for options that you can set.
If you want totally customised output using CSS, then you'll need to write your own solution using the API to spit out content that can be styled.