Tooltips

Bootstrap's tooltip plugin is an updated version of Jason Frame's jQuery.tipsy plugin. Tooltips can be used to provide users with additional information labels about specific content on your pages or provide insight into what input is expected in form elements.

Bootstrap 4 uses the third-party tether library for positioning. You have to include the Tether library in order to use tooltips with Bootstrap 4. To install and use the Tether library, complete the following steps:

  1. Open the bower.json file, which is located in your project's root folder. If you do not see the file in the Visual Studio Solution Explorer, click on the Show All Files button on the Solution Explorer toolbar.
  2. In the bower.json file, add the following to the list of dependencies:
            "tether": "1.1.1"
  3. Visual Studio should begin to download the tether library to the wwwrootlib ether folder in your project.
  4. Next, to include the Tether library on your site pages, open the project's _Layout.cshtml file, which is located in the ViewsShared folder, and add the following highlighted line before the line where you have included the bootstrap.js script:
            <script src="~/lib/jquery/dist/jquery.js"></script> 
        <script src="~/lib/tether/dist/js/tether.js"></script> 
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
  5. To use a tooltip on any element, add a data-toggle="tooltip" attribute to it. You can specify the placement of the tooltip by setting the data-placement attribute to one of the following values: top, bottom, left, and right.
  6. Finally, set the value of the data-original-title attribute to specify what text should be shown inside the tooltip.
  7. One caveat of tooltips is that, because of performance concerns, the data- API is opt-in, which means you have to initialize the plugin manually. To do this, add the following JavaScript to your page:
            $(function () { 
            $('[data-toggle="tooltip"]').tooltip(); 
        })
  8. The preceding code finds all elements whose data-toggle attribute is set to tooltip and initializes the tooltip plugin for these elements. The result will look similar to the following screenshot in your browser:
    Tooltips
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.138.177