I am trying to add tooltip to Bootstrap, tried all solutions found on internet - nothing helps. Here is my dropdown(I am also using String and jstl tags):
<div class="btn-group" style="margin-bottom:5px; width: 100%;">
<a id="tableNameButton" data-placement="bottom" title="Text" class="my-tooltip my-dropdown tableNameButton btn btn-default btn-block btn-select" data-toggle="dropdown" href="#">Select table <span class="caret"></span></a>
<form:input class="form-control" id="tableNameFormId" path="tableName" style="visibility: hidden; display: none;" />
<ul id="tableName" class="dropdown-menu scrollable-menu">
<c:forEach items="${databaseTables}" var="databaseTable">
<li>${databaseTable}</li>
</c:forEach>
</ul>
</div>
And on javascript:
$('.my-dropdown').dropdown();
$('.my-dropdown').tooltip();
This thing doesn't work.
Hope someone already solved this problem, thanks in advance.
Check you have linked everything up correctly and included the bootstrap.js file. I have set up a JSFIDDLE with your code and the tooltip works:
http://jsfiddle.net/shannabarnard/ueoxmm9v/
<div class="btn-group" style="margin-bottom:5px; width: 100%;">
<a id="tableNameButton" data-placement="bottom" title="Text" class="my-tooltip my-dropdown tableNameButton btn btn-default btn-block btn-select" data-toggle="dropdown" href="#">Select table <span class="caret"></span></a>
<form:input class="form-control" id="tableNameFormId" path="tableName" style="visibility: hidden; display: none;" />
<ul id="tableName" class="dropdown-menu scrollable-menu">
<c:forEach items="${databaseTables}" var="databaseTable">
<li>${databaseTable}</li>
</c:forEach>
</ul>
</div>
JS
$('.my-dropdown').dropdown();
$('.my-tooltip').tooltip();
I suppose it doesn't work because you didn't add data-attributes like data-toggle and data-placement. Try to add them and I think it'll work.
See fiddle with working example: http://jsfiddle.net/h56xw8wq/1/
You should have smth like
<li class="dropdown" id="example" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" > ... </li>
Hope it'll help you:)
Related
So I have a jQuery repeater form and it works perfectly fine when I use it as it is but I want to tweak the delete button effect. It has "slideup" jQuery effect but I want to change it my own effect so I have tried few methods but I haven't able to delete the items in the form.
Below is my code and methods I have tried.
form.html
<form role="form" action="//" method="post" class="mt-repeater form-horizontal">
<div data-repeater-list="group-a">
<div class="mt-repeater-input">
<label>Organization</label>
<input type="text">
</div>
<div class="mt-repeater-input">
<a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete inp-del">
<i class="fa fa-close"></i> Delete</a>
</div>
</div>
<div style="border-bottom: 1px solid #ddd;padding-bottom: 10px;">
<a href="javascript:;" data-repeater-create class="btn btn-success mt-repeater-add uadd_btn">
<i class="fa fa-plus"></i> Add</a>
</div>
<input type="submit" class="u-submit" value="Save Changes" />
</form>
Actual form-repeater.min.js
var FormRepeater=function(){return{init:function(){$(".mt-repeater").each(function(){$(this).repeater({show:function(){$(this).slideDown(),$(".date-picker").datepicker({rtl:App.isRTL(),orientation:"left",autoclose:!0})},hide:function(e){$(this.slideUp(e)},ready:function(e){}})})}}}();jQuery(document).ready(function(){FormRepeater.init()});
The above JS works fine because I haven't tweaked anything inside the JS code. But in below code I tweaked as per my requirement as you can see I changed $(this.slideUp(e) to $(this).css("background","red"). So the effect works fine but it doesn't delete the item. How can I achieve my requirements using below code?
Tried form-repeater.min.js
var FormRepeater=function(){return{init:function(){$(".mt-repeater").each(function(){$(this).repeater({show:function(){$(this).slideDown(),$(".date-picker").datepicker({rtl:App.isRTL(),orientation:"left",autoclose:!0})},hide:function(e){$(this).css("background","red")},ready:function(e){}})})}}}();jQuery(document).ready(function(){FormRepeater.init()});
I have a bootstrap select dropdown.
I want to change the selection when I load the page. How can I write jquery for the same?
I've tried using $('.dnsType').toggle('Hostname') but that didnt work :(
This is my code:
<div class="row form-group">
<div class="btn-group dnsType <%= getColumnSize(editMode) %>">
<button class="btn btn-xs white dropdown-toggle" id="dnsType" type="button" data-toggle="dropdown" aria-expanded="true">
<span data-value="IP Address">IP Address</span><b class="caret"></b>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dnsType">
<li><a value="IP Address">IP Address</a></li>
<li><a value="Hostname">Hostname</a></li>
</ul>
</div>
<div class="<%= getColumnSize(editMode) %>">
<div class="form-horizontal">
<input type="text" name="ipAddress" class="ipAddress" data-name="IP Address" class="form-control" value="<%= controller.ipAddress %>">
<span class="validationErrorMessage"></span>
</div>
</div>
</div>
Bootstrap dropdowns are not like <select> elements. They don't have "selections". It is just a dropdown that shows a list of links when you click the button. I'm guessing that you just want to change the text for that button when the page loads. Here is how you can do that:
$("#dnsType span").text("Hostname").attr('data-value','Hostname');
This sets the text to "Hostname" and changes the data-value attribute to "Hostname"
I am looking at how to populate a hidden_field with the value of a f.select field however I am having difficulty. I was going to use javascript but the html created from my haml makes it difficult to assign an id to the select I wish to pass the value from.
= f.select :trial, [['Yes', 'true'], ['No', 'false']], {}, :id => "free-trial", class: 'selectpicker mandatory'
This generates the following html
<div class="col-sm-4">
<select class="selectpicker mandatory" id="free-trial" name="campaign[trial]" style="display: none;">
<option value="true">Yes</option>
<option value="false" selected="selected">No</option>
</select>
<div class="btn-group bootstrap-select mandatory">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" data-id="free-trial" data-original-title="" title="">
<span class="filter-option pull-left">No</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="max-height: 133px; overflow-y: auto; min-height: 0px;">
<li rel="0">
<a tabindex="0" class="">
<span class="text">
Yes
</span>
<i class="icon-ok check-mark"></i>
</a>
</li>
<li rel="1" class="selected">
<a tabindex="0" class="">
<span class="text">No</span>
<i class="icon-ok check-mark"></i>
</a>
</li>
</ul>
</div>
</div>
This html when display is actually two selects one hidden with the ID assigned and a second which is displayed without the id associated. As a result my clicking on the visible select means the associated jquery doesnt fire.
If i understood you properly, you want catch value from select to hidden_input. You can use jquery to do that:
$('#free-trial').on('change', function(){
var val = $(this).val();
$('#your_hidden_input').attr('value', val);
}
I am playing with Fuel UX pillbox component and I want to make it part of a form I have to submit. Unfortunately, the control does not contain any form element to submit which makes it cool but useless (for me). I added a Input::Hidden element in the HTML code but now I have to force the pillbox component to work with the form element which I am not sure how to do.
<div class="form-group">
<label for="{name}" class="col-sm-4 control-label text-right">Tags</label>
<div class="col-sm-8">
<div class="pillbox" data-initialize="pillbox" id="pillbox-{name}">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
<input type="hidden" name="{name}" id="{name}" value="">
</div>
</div>
What I really need is to use JavaScript to update the Input::Hidden element when a new tag is added or removed from the list.
Oh, JavaScript is not my forte.
The Fuel UX component has event for add and remove new tag the probably has to be used but as I mentioned - not sure how to implement it.
If you have any suggestions, please help, or if you have any other suggestions on how to implement the Pillbox component with a HTML form - I am opened to new ideas.
Thanks.
You could use the Pillbox events to capture the pillbox data via the items method.
HTML:
<div class="pillbox" id="myPillbox1">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
</div>
<input id="pillboxInput" type="text" value="">
Javascript:
$('#myPillbox1').on('added.fu.pillbox edited.fu.pillbox removed.fu.pillbox', function pillboxChanged() {
$('#pillboxInput').val( JSON.stringify( $('#myPillbox1').pillbox('items') ) );
});
This example outputs into a JSON object structure, since the pillbox control supports text and value attributes (and more with data attributes) for each pill.
Here's the link: http://mindmup.github.io/bootstrap-wysiwyg/. I can't get it to work. I've included the script like that:
<script src="js/bootstrap-wysiwyg.js"></script>
And done like this:
<div id="alerts"></div>
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
<ul class="dropdown-menu">
</ul>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
<li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
<li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
<a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
<a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
<a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
<a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
<a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
<div class="dropdown-menu input-append">
<input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
<button class="btn" type="button">Add</button>
</div>
<a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>
</div>
<div class="btn-group">
<a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
<input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</div>
<div class="btn-group">
<a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
<a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
</div>
<input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
</div>
<div id="editor">
Go ahead…
</div>
And it still doesn't show the editor. It shows the buttons and that things, but the editor isn't shown. I'm really now to using JavaScript and those things, if anyone could explain it a bit deeply, I would be grateful.
Also, on Chrome developer tools console, I get this error:
Uncaught TypeError: Cannot read property 'fn' of undefined bootstrap-wysiwyg.js:17
here's line 17:
$.fn.cleanHtml = function () {
You need the bootstrap library also, which also requires the jQuery library, add those both in head tags of your html. (first jQuery, then boostrap.js, then wsiwyg).
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://mindmup.s3.amazonaws.com/lib/jquery.hotkeys.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
You should include also index.css in the head section of your HTML file. Like so:
<link href="path_to_your_css_files/index.css" rel="stylesheet">
You can copy its content from here
I know this is an old thread, but hopefully it may help someone coming upon it years later like myself with other issues.
Anyway, I was encountering the same problems, and here's what I did:
The Cannot read property 'fn' was due to the browser being unable to
locate the jquery script, as I had it referenced in a block at the
bottom of my base.html file vs the <head>. I'm certain there's an
optimal way to handle your scripts across templates without placing
them in the <head> of the base.html and incurring a performance hit,
but i'm just starting out so I'm not sure what that may be.
Regarding what to do with $('#editor').wysiwyg(); - you place this
in a script tag at the bottom of the html file that houses your
"#editor" div.
The reason its just a "box" is that they lightly touch on needing to
add a toolbar, but don't provide the entire code for it. However,
you can harvest it from the demo page if you inspect it. As of this
post it should start with something like the following:
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
...
</div>