Bootswatch is causing the Bootstrap tooltip feature to malfunction

Could someone help me figure out why my tooltip isn't functioning properly?

The HTML Code in Question:

<div class="form-check">
          <label class="form-check-label" >
            <input type="radio" class="form-check-input" name="optionsRadios" 
            id="has-been" value="has-been" (click)='onRadioClick(2)'> Has-Been
            <i class="fa fa-question-circle" aria-hidden="true" 
            data-toggle="tooltip" data-placement="right" title=""></i>
          </label>

        </div>

List of Imported Bootstrap Files from index.html:

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
    crossorigin="anonymous">
    <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://bootswatch.com/_vendor/popper.js/dist/umd/popper.min.js">
  <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous">
    </script>

Could the problem be related to using a Bootswatch theme?

An Update: Tooltips can be found here

https://i.sstatic.net/lhzDb.jpg

Another Update: I've included the entire index.html. My goal is to customize the appearance of my tooltips as shown in the image above. Currently, they just have the default text appearance.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>UniApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
    crossorigin="anonymous">
  <link rel="stylesheet" href="//bootswatch.com/4/flatly/bootstrap.min.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

</head>

<body>

  <app-root></app-root>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"
    crossorigin="anonymous"></script>

  <script>
    $(document).ready(function () {
      $('[data-toggle="tooltip"]').tooltip();
    });
  </script>
<!-- 
  <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip();
    });  
  </script> -->


</body>

</html>
htmlcsstwitter-bootstraptooltip

Answer №1

The initial step involves tidying up your code. It appears that both Bootstrap 3 and Bootstrap 4 are being loaded simultaneously, along with jQuery and Popper in duplicate instances. Additionally, the ordering of includes in your code is incorrect.

To rectify this issue and streamline your code to support only Bootstrap 4, it should be arranged in accordance with the official documentation. The revised code snippet looks like this:

$(function(){
  $('[data-toggle="tooltip"]').tooltip(); 
}); 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="//bootswatch.com/4/flatly/bootstrap.min.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<div class="form-check">
  <label class="form-check-label" >
    <input type="radio" class="form-check-input" name="optionsRadios" id="has-been" value="has-been" (click)='onRadioClick(2)'>
    Has-Been
    <i class="fa fa-question-circle" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="Test"></i>
  </label>
</div>

It's important to note that a tooltip will only appear when the 'title' attribute contains a legitimate value. In your original code, as 'title' was empty, the tooltip function was not triggering at all.

Interestingly, the Bootswatch theme you're using, particularly Flatly, does not seem to have any noticeable impact on the appearance of the 'tooltip' component.

Answer №2

Include the following script in your code: 

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });  
</script>

Make sure to add a title for it!

By the way, make sure you are using Bootstrap 4 CSS and Bootstrap 3 JS.

<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Applying CSS selectors to target child elements within a select option

I am looking to apply a CSS selector only on select option child values. I have assigned an id to the selector and now I want to apply different CSS styles to each child (child 1, child 2, etc). <select name="options[81]" id="select_81" class="required ...

htmlcss

Is it possible to incorporate HTML tags within the <template> section of AIML files?

My goal is to create a simple bot using an AIML file. The idea is that I can input a question and the corresponding pattern will be returned from the file. For instance, I have this sample pattern in my AIML file: <category> <pattern>TEST& ...

pythonhtmlartificial-intelligenceaiml

Bootstrap relies on jQuery for its JavaScript functionality, so jQuery must be loaded before using Bootstrap's JavaScript

I encountered an issue while trying to load the Bootstrap library, consistently receiving this error message: Uncaught Error: Bootstrap's JavaScript requires jQuery Even though I have ensured that jQuery is loaded before attaching the Bootstrap li ...

javascriptjqueryhtmltwitter-bootstrap

How can I ensure my md-sidenav takes up the entire height when using ui-router?

Currently, I am utilizing the most recent version of Angular Material (1.0.0) library and I am attempting to ensure that my <md-sidebar> panel occupies the entire height of the available space on the webpage. While it functions correctly on a regul ...

htmlcssangularjsangular-material

What is the best way to add borders to table cells that have a non-zero value

I am trying to create a table using a function and it currently looks like this: table { border: 1px solid; } td { width: 30px; height: 30px; text-align: center; } <table> <tr> <td>2</td> <td>0</td> ...

htmlcsshtml-table

Enhance your React project by incorporating Material-UI card media elements with the ability to add

I am trying to figure out how to create an opaque colored overlay on top of an image using Material-UI. While it is possible with plain HTML, CSS, and JavaScript, I am facing some challenges with Material-UI. <Card> <CardMedia> <im ...

javascripthtmlcssreactjsmaterial-ui

Tips for using JavaScript to set images from Flickr API as img src

I've been attempting to populate a table with images fetched from flickr. The array I'm using consists of urls like: ["https://www.flickr.com/photos/113081696@N07/24695273486", "https://www.flickr.com/photos/113081696@N07/24565358002", "https:// ...

javascripthtmlflickr

Adjust the size of an element by utilizing a different element

I'm facing a challenge with this code. I need to dynamically set the width of the "wrap-description" divs to be equal to the width of the corresponding "picture-damage" images plus an additional 20 pixels. Since there will be multiple elements for bot ...

cssangularjsangularjs-ng-repeatdirectiveng-style

Pictures acting erratic following the implementation of two setTimeout functions

I encountered an issue while developing a pong game using html/css/javascript. Everything was going smoothly until I introduced a second setTimeout() function. Here is the snippet of my html code: <!DOCTYPE html> <html> <head> <scrip ...

javascripthtmlcss

Loading screen for specific content within the current WordPress theme

I am trying to display a preloader only in the 'content' div, but it ends up hiding the entire page. The structure of the site is as follows: Title Menu Content (where I want the preloader) Footer I'm having trouble figuring out where exa ...

javascriptjquerycsswordpresspreloader

Guide to Angular Directives: Assigning Attributes to innerHTML

Looking to add attributes to the inner HTML myTemplate.html <div class="custom-template"></div> HTML <template></template> directive app.directive('template', ['$compile', function($compile) { retur ...

javascripthtmlangularjsangular-directive

Align the text to the center beneath the image using Jquery's append function

I am looking to showcase a collection of fruits and vegetables through images, with the names displayed centered underneath each image. Additionally, I want to implement jQuery append functionality so that the names only appear when a specific button is cl ...

htmljquerycss

Struggling with JavaScript conditional statements

Currently, I am in the process of creating a login and registration panel using jQuery and PHP. Essentially, if there are any errors during registration, it sets certain form errors, redirects back to the registration page, the JavaScript identifies these ...

phpjavascriptjqueryhtml

Centering "Label - Value" without tables in web design

It's common to have multiple labels (such as name, age, color) and a corresponding value for each one. One way to ensure that the values (for example Steve, 19, Red) all start in the same horizontal position is by organizing them in a 2 column, 3 row ...

htmlcsstabular

Group all 3 elements with a wrapper

I'm facing a challenge in trying to enclose 3 divs inside one wrapping div. I have successfully wrapped up 2 divs, but the third one is proving to be difficult. To see my progress so far, you can check out my JSFiddle here: http://jsfiddle.net/cz9eY/ ...

javascriptjqueryhtmlwrapall

Achieve a seamless integration of a navbar and list on the same line by utilizing the power of Bootstrap

No matter how much I tried, I couldn't solve the problem of my list not appearing in the same line. I attempted using display: inline-block; and padding: 0, but to no avail. /* added by editor for demonstration purpose */ body { background-color: ...

htmlcssbootstrap-5

What is the best way to ensure that a React app is always displayed in full screen

I am facing an issue while developing an app with React and Material UI. I am trying to display the app in full-page mode, but unable to achieve it successfully. Currently, it appears like this: https://i.sstatic.net/Hg0CA.png Here is my code snippet from ...

javascripthtmlcssreactjsmaterial-ui

The data-bs-theme attribute of an element does not take precedence over the global theme

UPDATE: I recently included a placeholder item in my carousel because the local database feed was not working, and now the theme is malfunctioning locally as well. Something seems off with the carousel items causing issues. END OF UPDATE I successfully ...

cssreactjsbootstrap-5react-bootstrapcolor-scheme

Utilizing nested createHtmlOutputFromFile in Google Apps Script HtmlService to generate jQuery code

Embarking on a new journey, I am diving headfirst into the world of JQuery WebApp with Google Apps Script. Every day is filled with new discoveries and excitement as I immerse myself in learning to piece things together. Starting off with some examples an ...

jqueryhtmlgoogle-apps-script

Guide on setting the BackColor of a table cell based on a database value dynamically

In the project I am currently working on, there is a request to change the background color of specific table cells based on their values. In order to achieve this, I am handling the RadGrid_ItemDataBound event and attempting to set the BackColor property ...

cssvb.netcellradgrid