how to use tooltip in angular 4 with bootstrap tether jquery installed from npm? -
is there way use tooltip features bootstrap 4?
we've installed bootstrap 4, tether, , jquery using npm install,
and in documentation have write jquery code in javascript,
$(function () [ $('[data-toggle="tooltip"]').tooltip() })
and add code in html,
data-toggle="tooltip" data-placement="top" title="tooltip on top"
we've tried add html code not working, have write jquery code, can write jquery syntax in angular 4 using typescript? put syntax in angular 4?
add jquery, tether , bootstrap scripts angular-cli.json
"scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/tether/dist/js/tether.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],
then go desired component. , type declare var $: any;
.
import { component, oninit } '@angular/core'; // line allow use jquery declare var $: any; @component({ ... })
put content inside ngoninit() { /* content here. */ }
.
ngoninit() { $(() => { // testing jquery console.log('hello there!'); }); }
i prefer not use jquery in angular, not practice, try searching tooltips build on top of angular or use renderer2
https://angular.io/api/core/renderer2 or build own directive this, angular material2 has tooltip component might want use, easy implement in typescript.
https://material.angular.io/components/tooltip/overview
for complete docs.
Comments
Post a Comment