I was messing around with Bootstrap and created a page which has a simple navigation menu. I wanted to add modal for one of the links, which already has a tooltip.
And I did add the modal to li like this,
data-toggle="modal" data-target="#SettingsModal" data-toggle="tooltip"
Surprisingly, its working. It doesn't make much sense. Because at least one data-toggle has to be neglected.
I know that it is better to wrap it inside an element which has tooltip. My question is, how is this working?
It's working because the Bootstrap data attributes use separate jQuery selectors to "activate" the various components.
Since
$('[data-toggle="modal"]') and $('[data-toggle="tooltip"]') are both referenced in the Bootstrap JS code, both modal and tooltip components are working.
Related
I need this kind of behavior like when we click on make we can open the next model list in the same section
Please can you help me with how I can achieve this?
Im not sure about vanilla js but u can achieve this in ReactJS using react-router-dom package. you can add Link to each section which will replace that modal in the section without page reloading/refreshing.
Edit:
I have 2 ideas to to this with vanilla js but its a bit complicated and confusing.
using appenChild() change section child with onclick.
adding display: none to all and changing display: block for the once to display
this will not change reload or take to new page but u will need to add js for onclick for each route/model
I am using a carousel widget of the hugo framework but this is might be a very basic html question. I want a hyperlink in the text to do two things: change the item of the carousel widget and to focus on it.
My current code looks like the following:
linked phrase
This now successfully changes the item of the carousel to the desired one. But it does not focus to the carousel.
On the other hand I can focus on the carousel like this but of course the item of the carousel is not changed:
linked phrase
So how can I combine both? I tried also to include the data-target and data-slide attributes into a li-tag that surrounds the a-tag, which indeed triggers the change of item but which also ignores the href.
I also tried a span-tag within the a-tag without success either.
Maybe I need to do something with javascript? I tried but don't know javascript very well.
Thank you in advance!
OK, after all I solved the issue like the following. I created a javascript that scrolls to the carousel. I actually also built a button to connect that javascript. And within a table, I created cells that contain the attributes data-slide-to.
<th data-target="#hero_carousel" data-slide-to="4">
<button type="button" style="width:100%" onclick="document.getElementById('screen_focus').scrollIntoView({
behavior: 'smooth'});">Daten sammeln</button></th>
I'm trying to use bootstrap's tooltip feature on a dynamically created set of divs, and when i hover i can see in chrome's inspector that the div itself is modified as it is supposed to (title value is passed to data-original-title) AND that the generated tooltip's div itself is appended as expected (either next to my div or in the body if i set it to), but nothing appears.
After looking for a while i found a jsfiddle explaining a solution for another tooltip-related problem, but i found out it had exactly the same problem.
I simplified it so you can see for yourself : http://jsfiddle.net/uDF4N/95/
<a id="hop" data-placement="bottom" data-toggle="tooltip" title="Apps">coucou</a>
As you can see, on hover the tooltip appears in the DOM, but is not displayed.
I tried with IE11 as well.
Any idea on what i'm doing wrong ?
You're including bootstrap.min.js twice. just remove one.
http://jsfiddle.net/uDF4N/97/
Copied from #MasterYoda's comment
I'm trying to use a ui kit (http://demos.creative-tim.com/material-kit/components-documentation.html#checkbox-row) and it's have several js files, jquery, bootstrap, its own etc. I included them in the index.html and works well if the checkbox or other visual element is on the page at start.
But when i hide a div under ngIf with the checkboxes, and a button toggle shows this div later, it's visual element what the js files adds to it, doesn't do they job and i don't see the fancy checkboxes.
As i think, the external libs right part should be initialized when the hidden div comes visible.
How could i overcome with this issue? (i am using angular 4 with server side rendering)
when i hide a div under ngIf
The *ngIf directive does not hide the div, it removes or adds it to the DOM which is probably why you're having initialization issues. Try binding to [hidden] instead.
I am using the modal plugin from Bootstrap and for some reason the backdrop is not showing.
When I check same code on W3Schools I notice a div is generated every time a modal opens:
<div class="modal-backdrop fade in"></div>
I got the exact same code as on W3Schools but this div is not generated on my site.
How can I fix that?
This happened to me when I used the wrong method to open the modal. I had
$('#myModal').show()
when of course it should be
$('#myModal').modal('show')
Another symptom of using the wrong method, in addition to the semi-opaque backdrop not showing, was the close button in the modal also did not work.
Please check whether CSS properties are overridden or not by inspecting <div class="modal-backdrop fade in"></div> element. Mostly this could be a CSS issue caused by an override.
Cannot reproduce this, as the w3 school examples work fine.
Verify the following. This might cause the issue:
It's good practice to put the <div class="modal">.. at the end of
the file or before </body>
If any other css class is overriding the modal-backdrop class
if jquery and bootstrap JS are added properly
Get the modal from
http://getbootstrap.com/javascript/#modals-examples