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.
Related
I have the current code in my 'index.ejs' file. I would like to pass the item as a parameter to the deleteItem() and updateItem() functions. However, simply writing item is not working.
<% items.forEach((item) => { %>
<li class="list-group-item">
<span class="description"><%= item %></span>
<button class="btn btn-default btn-xs pull-right" id="delete-button" onclick="deleteItem()">
<i class="glyphicon glyphicon-trash"></i>
</button>
<button class="btn btn-default btn-xs pull-right" id="update-button" onclick="updateItem()">
<i class="glyphicon glyphicon-pencil"></i>
</button>
</li>
<% }) %>
To be specific, I want the individual items in the forEach loop to be passed when their buttons are clicked. I am using embedded javascript as you can see.
I have looked up answers saying one needs to make use of document.getElementById(), but I tried implementing it and it didn't work. Not sure if I did it correctly, though.
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 getting mad about this.Long story short :
This is the show-cart.php where cart is shown.
When i click Remove button , the event I call works 1 over 10 times about.Below it's the simple code.What's wrong? Why it's not working properly?
<button type="button" class="btn btn-danger">
<span onclick="alert('smth')"; class="glyphicon glyphicon-remove""></span> Remove
</button>
This is my console
Try putting the onclick function on the button element instead of span. The following snippet shows this along with some other cleanup in your code.
<button type="button" class="btn btn-danger" onclick="alert('smth')">
<span class="glyphicon glyphicon-remove"></span> Remove
</button>
I'm trying to add in a tooltip to an existing splash page. I just plugged in all the relevant Bootstrap docs, but can't seem to figure out why I can't get a tooltip showing on the small grey link center left of this page - http://wearepage.com/absorb/
Can anyone help? Seems like I haven't plugged in the bootstrap.js file properly, but I can't figure out what's missing.
Thanks
Try this:
Initilize the tool tip in script
$('#YourButtonID').tooltip();
HTML:
<button id="btn" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
DEMO
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-**