Bootstrap Tooltips have disabled parts of my javascript - javascript

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

Related

Bootstrap Popover in an LI

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.

Is there anyway to use bootstrap's popover on div tags?

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" });

How can I use bootstrap's popover with an additional condition?

There is a simple example of popover here. How can I add a condition to this example? For example the popover should be triggered when it is hovered AND var "triggerPopover" is true.
HTML on jsfiddle:
<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>
Javascript:
$('#popoverData').popover();
$('#popoverOption').popover({ trigger: "hover" });

jQuery hover function fails in specific case

I have the following function:
$('[data-toggle=popover]').hover(
function () {
$(this).popover('show');
}, function () {
$(this).popover('hide');
}
);
It works on this link (displays popover):
<p class="pull-right" style="margin-top: .5em;">
<i class="fa fa-question-circle fa-2x" data-toggle="popover" data-placement="left" title="Export Sets Help" data-content="foo"> </i>
</p>
but not this one (nothing fires):
<span class="green" data-toggle="popover" data-placement="left" title=""
data-content="foo" data-original-title="Status Detail">
<i class="fa fa-check"> </i>Success
</span>
The later link was created via a datatable row so the function actions were not attached. Adding the function to fnDrawCallback worked.

Semantic Ui Dropdown on hover

I want my semantic ui dropdown menu to trigger on hover instead of click, it works on click, but not hover.
Javascript:
$('.ui.dropdown').dropdown({on:'hover'});
HTML:
<div class="ui dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>
If you want hover effect to open dropdown menu then you don't need to use javascript, instead you can add class simple to your parent div:
<div class="ui simple dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>
Fiddle Demo
This is the same answer as above, just cleaner.
$('.dropdown').dropdown({transition: 'drop', on: 'hover' });
you can take this, it works for me
$('.dropdown').dropdown({transition: 'drop' }).dropdown({ on: 'hover' });
I use this:
$('.menu > .ui.dropdown').dropdown({
on: 'hover'
});
And it works well. On your case, try to select the parent of dropdown item.

Categories