This is part 3 of a 3-part tutorial series.
- Integrating Rails and Bootstrap, Part 1 – the Installation
- Integrating Rails and Bootstrap, Part 2 – CSS and Components
Modals are “pop-ups” that are contained within your rendered page, and do not require opening another browser window or tab. You can read more about them and see code examples here.
For our application, we are going to use modals to display the todo notes. We need to make our changes in
app/views/todos/index.html.erb. Instead of displaying the notes in the table, we will display a link which will activate a modal. If the todo has no notes, there will be no link.
We need to change:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
When you refresh your browser, you will see that you now have “View notes” links, when appropriate.
Now we are going to add a dropdown menu to our navbar. Dropdowns can also be used as standalone buttons, using
nav-pills. Read more about that here.
We need to add the dropdown to our
app/views/shared/_navigation.html.erb file. This is the code we will be adding:
1 2 3 4 5 6 7 8 9 10
Our new file looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Tooltips are nice alternatives to the standard
title attribute that you can apply to HTML elements. You can read about them here.
We will use tooltips to display the creation and modification dates of our todos.
Our changes will once again happen in
app/views/todos/index.html.erb. We need to change:
1 2 3 4 5
If you refresh the browser now, you can place your mouse on one of the todo titles and you will see the creation and modification dates and times. We are close, but you are seeing the browser displaying the element’s
title tag’s contents.
1 2 3
Now refresh the page and you will have working tooltips!
Before I wrap it up, I want to introduce you to one more Bootstrap component. That component is the popover. Popovers are very similar to tooltips, except they are intended to display more than a few words. You can also provide them full html templates. You can read more about them here.
For the sake of an example, we are going to add a second way that users can view their todo notes.
You currently have a table cell which contains the link to show the notes. We are going to add some code to the end of that cell, just before the
</td> tag. This is the code we are going to add:
1 2 3
1 2 3 4 5 6
We are using the
hover trigger, you can read more about the options that you can provide to the
popover method here.
If you refresh your browser, and hover your mouse over any of the “View notes (popover)” links, you will see that you now have nice popovers!
End of the road
We hope you have enjoyed this tutorial series! There are lots more features in Bootstrap, you can check out more on their site.