Develop Reference

How to attach NGBootstrap tooltip to font awesome icon

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>

jquery li binding ul syntax issue

I am dynamically adding li tag to UL .the following is very complex li tag with which i am getting syntax issue.Could any one please help me to fix following tag.
Any basic tutorials to form these kind of links also great.
I am trying to bind link with some conditions.on click of a link it opens a new page .
notifcationUL.append('<li><div class="pull-left"><strong>See All Notifications</strong><i class="fa fa-angle-right"></i></div><div class="pull-right"> Clear Notifications <span class="glyphicon glyphicon-trash pull-right "></span></div></li>');

You can't add server side asp code to the page on the client side with jquery :/
You're doing something fundamentally wrong. Can you edit your question explaining what you're trying to archieve?

Your quotations are off . When you append anything with jQuery the inner quotes must be opposite of outside quotation . See below.
your syntax :
notifcationUL.append('<li><div class="pull-left"><strong>See All Notifications</strong><i class="fa fa-angle-right"></i></div><div class="pull-right"> Clear Notifications <span class="glyphicon glyphicon-trash pull-right "></span></div></li>');
correct syntax :
notifcationUL.append('<li><div class="pull-left"><strong>See All Notifications</strong><i class="fa fa-angle-right"></i></div><div class="pull-right"> Clear Notifications <span class="glyphicon glyphicon-trash pull-right "></span></div></li>');

Bootstrap Tooltip Not Displaying

I am trying to use bootstrap tooltips - but currently I cannot get them to display. I've followed all the instructions on the Bootstrap Docs guide, but they still aren't working. Is there something I might be missing?
HTML:
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" title="Refresh inbox"><i class="fa fa-refresh"></i> Refresh</button>
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Mark as read"><i class="fa fa-eye"></i> </button>
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Mark as important"><i class="fa fa-exclamation"></i> </button>
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Move to trash"><i class="fa fa-trash-o"></i> </button>
JS:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
And a code pen can be found here:
http://codepen.io/anon/pen/LpzPxR
My initial guess was that something was wrong with the CSS but I can't seem to get it to work in the pen either.
EDIT: I've fixed the issue in the codepen but the actual template is still displaying incorrectly - http://i62.tinypic.com/2ik2u6s.jpg

You're almost there: you are just missing jquery, before bootstrap.js.
From bootstrap documentation:
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files)
See forked codepen
NB: I also added font-awesome.css as you have icons from that latter library.
Edit: from this screenshot posted in comment and the conversation, it appeared that OP had also jQuery UI Tooltip, which is conflicting with bootstrap tooltips.

jQuery - Mark a notification as read

I am working with bootstrap and I found a really good looking admin template. This template offers the possibility to show specific notifications at the main navigation. If I click on the notification icon, a small popup appears where I can see the notification.
You can see it here:
So I entered the green checkboxes on the left and if a user clicks on a checkbox, the notification is marked as read and dissapears from the notification panel. So far so good my problem is that I solved this solution with PHP and the complete page reloads once I click on the green checkbox. I am now looking for a jQuery solution, so that the page does not need to reload itself once the green checkbox is checked. So if a user clicks on the green checkbox, the notification should disappear without reloading the page.
My current code is:
<?php
<ul class='dropdown-menu dropdown-navbar'>
<li>
<a href='./index.php?func=showsms&id=".$msg["id"][$x]."&sid=$sid' target='_blank' class='clearfix'>
<div class='col-sm-3'>
<span class='msg-time'>
<a class='btn btn-success btn-xs' href='./index.php?func=$func&read_sms=".$msg["id"][$x]."&sid=$sid' role='button'><i class='ace-icon fa fa-check bigger-110 icon-only'></i></a>
</span>
</span>\
</div>
<div class='col-sm-9'>
<a href='#messagebox_".$msg["id"][$x]."' role='button' class='green' data-toggle='modal'>
<span class='msg-body'>
<span class='msg-title'>
<span class='blue'>".$sender["firstname"][0]." ".$sender["lastname"][0].":</span>
$msg["smstitle"][$x]
</span>
<span class='msg-time'>
<i class='ace-icon fa fa-clock-o'></i>
<span>".date("d.m.Y H:i",$msg["time_created"][$x])."</span>
</span>
</a>
</div>
</li>
</ul>
?>
Can someone tell me how I need to change the code so that I have the same solution with jQuery effect? I am not good at coding with jQuery. Would be awesome if someone can help me and tell me what my code should look like.
Thanks,
Chris

What you have written is HTML and not PHP code! I believe there should be a class for changing it to a different colour (read notification). So, what you need to do is:
$(".dropdown-menu dropdown-navbar li a").click(function () {
$(this).closest("li").addClass("read");
// The above code will make the presentation look read.
// Now make it really read:
$.post("notification.php", {id: the_post_id, action: read});
return false;
});
Note: I didn't prevent the default action of following the link, because when you follow the link, it will trigger the read action right?
And I hope in PHP, when you render the HTML, you would do:
<li class="otherClass newClass type <?php if ($isRead) echo "read"; ?>">

Twitter Bootstrap Dropdown button and radio button

What's the logic for drop down button and radio button in twitter bootstrap ...I have seen only drop down menu in twitter bootstrap..Can anybody help me?

Button Dropdowns:
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
I'm not sure what you are asking though in terms of radio buttons so I think you should read Bootstrap's Form documentation, available at http://twitter.github.io/bootstrap/base-css.html#forms