Im attempting to do a pop over with bootstrap and keep the existing div formatting.
How can i fix the code below to make it work.
<ul class="list-group" data-bind="foreach: courses">
<li class="list-group-item CourseHover" data-bind="css: { hidden : isSatisfied}" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
<a tabindex="0" class="" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">
<div class="row">
<div class="col-sm-10">
<span data-bind="text:courseName"></span>
</div>
<div class="col-sm-2">
<span data-bind="text:courseCredits"></span> cr
</div>
</div>
</a>
</li>
Popovers have to be initialized by jquery.
This code should do the trick:
$(function() {
$('[data-toggle="popover"]').popover()
})
You also might want to put data-placement="bottom" or data-placement="top" in your anchor tag -- the popover otherwise might appear way to the right.
Related
js computes the structure below, i need a dropdown when the button is hovered whereas onclick should trigger the form submit.
nothing happens when i hover the button area. Is it because of is-active missing?
In Bulma's official docs about the dropdown menu, the example's indent can be confusing.
The "dropdown-menu" 'div' is a childnode of the main dropdown 'div'.
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Hover me</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
</div>
</div>
</div>
Hi i was wondering if it is possible to override or disable inheritance from a parent tag.
what i want to do is to be able to make use if the "input-group" class but having a particular tag not inheriting the toggle function from the parent a-tag.
the reason i'm doing this is because i'm using a plugin and i want to add a button looking consistent with the overall theme.
Here is some code:
<div class="col-lg-12 col-md-6">
<lable class="lfInputLable">From date</lable>
<div class="dropdown">
<a class="dropdown-toggle" id="dropdown1" role="button" data-toggle="dropdown" data-target="#">
<div class="input-group">
<!-- COMMENT: i want the span tag shown under this comment NOT to inherit the a-tag's toggle function, it being inside it and all -->
<span type="button" id="dateRemove" class="input-group-addon" ng-click="clearToDate()"><i class="glyphicon glyphicon-remove"></i></span>
<input type="text" class="form-control" data-ng-model="data1.dateDropDownInput1" data-date-time-input="YYYY-MM-DD HH:mm" disabled="disabled"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="data1.dateDropDownInput1" data-datetimepicker-config="{ dropdownSelector: '#dropdown1' }" />
</ul>
</div>
</div>
So is this at all possible?
Bootstrap's popover is easily used on tags like in this demo Is there any way to use it with hover event and on a div tag?
HTML:
<div class="container">
<a id="popoverData" class="btn" href="#" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with data-trigger</a>
<a id="popoverOption" class="btn" href="#" data-content="Popup with option trigger" rel="popover" data-placement="bottom" data-original-title="Title">Popup with option trigger</a>
</div>
JS:
$('#mytext').popover();
$('#name').popover();
Sure why not?
See this jsFiddle: http://jsfiddle.net/9P64a/2892/
html
<div id="container" data-content="Popup with option trigger" rel="popover" data-placement="bottom" data-original-title="Title">
Whatever you want.
</div>
javascript
$('#container').popover({ trigger: "hover" });
So here is a issue I am experiencing that is driving me nuts. As soon as I enable Bootstrap tooltips on my tags, the custom JavaScript I have won't trigger. If I remove the Bootstrap code that triggers the tooltip from the tag, everything works. JSFiddle Example
Working Example (remove: data-toggle="tooltip" data-placement="left" title="Parent Title Text." and it will work):
<li>
<a class="toggle-data-options" data-toggle="tooltip" data-placement="left" title="Parent Title Text.">Parent
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="display: inline;"></span>
<span class="glyphicon glyphicon-chevron-down" style="display:none;"></span>
</a>
<div class="data-options" style="display: none">
<a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 1 Text">Child Item 1</a>
<a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 2 Text">Child Item 2</a>
<a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 3 Text">Child Item 3</a>
</div>
</li>
When you enable the bootstrap tooltip it inserts the tooltip <div> immediately after .toggle-data-options.
.data-options is no longer the .next() element, so there is no match. Use .nextAll() instead:
$(document).ready(function () {
$('.toggle-data-options').on('click', function () {
$(this).nextAll('.data-options').toggle('fast');
$(this).toggleClass("active");
$(this).find('span').slideToggle(0);
});
});
JSFiddle
I am using http://fineuploader.com/ and Twitter bootstrap
The html code for the uploading files looks like this
<ul class="qq-upload-list-selector">
<li class="col-lg-3 col-md-4 col-xs-6 thumb">
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<a class="qq-upload-cancel-selector btn-small btn-warning" href="#">Cancel</a>
<a class="qq-upload-retry-selector btn-small btn-info" href="#">Retry</a>
<a class="qq-upload-delete-selector btn-small btn-warning" href="#">Delete</a>
<a class="qq-upload-pause-selector btn-small btn-info" href="#">Pause</a>
<a class="qq-upload-continue-selector btn-small btn-info" href="#">Continue</a>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
<a class="view-btn btn-small btn-info hide" target="_blank">View</a>
</li>
</ul>
I want to change the <ul></ul><li></li> tags to <div> because I want the result to appear in a bootstrap grid. When I change the code can't I get any upload result for my uploaded files. Looks like new li-tags generates by fineuploader javascript.
How do I use div instead and so that I can display the result in a bootstrap grid?
Tested this
<div class="qq-upload-list-selector col-lg-3 col-md-4 col-xs-6">
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
Rest of the code ....
</div>
Fine Uploader is expecting a container inside of the qq-upload-list-selector to to hold the file item. Consider adding another <div> as the only child of the qq-upload-list-selector.
So...
<div class="qq-upload-list-selector col-lg-3 col-md-4 col-xs-6">
<div>
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
Rest of the code ....
</div>
</div>
Why do you need a <div> for this? There's nothing special about a <div>. Just modify the style of the list item/list appropriately. Fine Uploader doesn't insert <li> tags if they aren't in your template.