Insights

I want to add a tooltip to an HTML element in Moodle, using the custom CSS available in the theme settings. I want only to use CSS, and not add any HTML or JavaScript to the page. Here's how I did it. See the Pen Popup message (pure CSS) by Yvonne Aburrow ( @vogelbeere ) on CodePen . This can be used to apply a popup message to any CSS class, and you can position the message anywhere on the page. You can style the popup message any way you want. Please view the demo in CodePen for best results.

Your app will undoubtedly have more than one modal (pop-up div), and it can be hard to see how to get more than one of them working in Angular. Here's a step-by-step guide to how to do it. Step 1. Put the required script tags in your HTML <script src = "scripts/angular.min.js" ></script> <script src = "scripts/ui-bootstrap.js" ></script> <script src = "scripts/ui-bootstrap-tpls.min.js" ></script> angular.min.js  is the main Angular library;  ui-bootstrap.js  is the Angular UI bootstrap library;  ui-bootstrap-tpls.min.js  is the Angular templating script to make the modal template display properly. Step 2. Put the modal template in your HTML, inside your ng-app div <div role = "main" id = "main" class = "ui-content scroll" ng-app = "myApp" > <!--MODAL WINDOW for item details --> <script type = "text/ng-template" id = "itemM...