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

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

Unpredictable Behavior of CSS Transition with JS createElement() Function

I'm using JavaScript to create a div element and I'm adding the CSS property transition: .5s linear top; When the user clicks on the element (onmousedown event), it is supposed to smoothly move to the top of the screen and then be deleted using ...

javascriptjquerycss

Struggling to make Tumblr Javascript function properly

I have integrated the following code snippet: <script type="text/javascript" src="http://underlineent.tumblr.com/api/read/json"> </script> Unfortunately, my Tumblr blog is not appearing on this site. Can anyone provide assistance? The provid ...

javascripthtmljsontumblr

Incorporate Margins for Table Cells in Outlook (HTML Email)

I'm currently in the process of creating an email newsletter and testing it out on Litmus. Here's how the newsletter design should appear (refer to the image below): Although I understand that it may not look exactly the same on Outlook, is the ...

htmlcssemailoutlook

Implementing jQuery UI toggleClass method to seamlessly alternate between two distinct CSS classes

My goal is to toggle between two CSS classes on a selector click using Jquery UI .toggleClass(), but unfortunately, it's not producing the desired toggle effect. $(".toggle").click(function () { $(".archivePosts .columns").removeClass( "l ...

javascriptjqueryhtmlcssjquery-ui

When a user clicks on a child element of an anchor tag, the function will

Is it possible to return a specific function when a user clicks on a child of an anchor element? <a href="/product/product-id"> I am a product <div> Add to favorites </div> </a> const handleClick = (event) =>{ ...

javascripthtmlreactjsdomnext.js

Check if the asp.net textbox meets the criteria of being exactly 19 characters long and is in the correct format using J

I have a web application developed in asp.net, which incorporates both bootstrap and jQuery. I am seeking a way to validate text input based on specific criteria: the text must be exactly 19 characters long and follow this format: - The first three charact ...

jquerytwitter-bootstrap

Transferring a variable through a Navigation Bar selection

Currently, I have a PHP/HTML select box that is generated dynamically based on database variables. I utilize $_POST to identify the selection and handle it as needed. My goal is to transition this functionality into a dropdown menu within a navigation bar ...

phphtmlnavigation

What is the process of invoking a Java method through AJAX on a website?

I am trying to figure out how to call the Java method getMessage() from a jar file whenever a button on my webpage is clicked. Can anyone help me achieve this? File name: index.html <!doctype html> <html> <head> <meta charset="utf-8" ...

javajqueryhtmlajax

What is the process for modifying a Joomla plugin?

Just starting out with Joomla development and recently installed Joomla 2.5 on my local computer for some practice. I have a question about editing Joomla plugins - specifically the layout of the Content - Pagebreak plugin (the pagination that appears wh ...

phpcssjoomla2.5

Align text to the left and right with a centered div

Visualize the asterisk * at the center of the div textAlignRight * text AlignLeft This is essentially my goal to accomplish <center> <span class="left_host">Right aligned</span> * <span class="righ ...

htmlcss

Switching the default image using jQuery upon click event

When I click on the image, I want to see a new image appear for just one second before returning to the default. I tried using setTimeout() function, but even after one second, I still see the same pressed.svg image. Here is my complete code: <html> ...

javascriptjqueryhtml

Pure CSS tab system that prevents label propagation using anchors

I am in the process of creating a tab system using only CSS with the help of the :target and :checked pseudo classes. However, I have encountered an issue where an anchor inside the label is not triggering the :checked. When clicking on the anchor, the :c ...

htmlcsscss-selectors

Breaking the border between columns in CSS columns

To see a demonstration of my question, please check out this fiddle. In short, I am seeking a solution for making the purple border extend to the height of the green border, overlapping it. I am open to any creative solutions and hacks. Specifically, wit ...

htmlcss

The drop-down menu is misaligned from its designated position underneath the title

Trying to incorporate a dropdown menu into my website, I am structuring the HTML as follows: <ul class="topnav"> <li> SECTION TITLE <ul class="subnav"> <li>One</li> <li>Two</li> ...

jqueryhtmlcssdrop-down-menu

The calculator is experiencing issues with JavaScript functionality

Having some trouble developing a calculator using HTML5, CSS, and JavaScript. After passing my HTML and CSS through validators successfully, I encountered issues when adding JavaScript functions to enable the functionality of the buttons on the calculator. ...

javascripthtmlcss

I Am unable to locate the '...' after applying the text-ellipsis style to a div

https://i.stack.imgur.com/Tsmf5.png The ellipsis '...' is not showing up even after I have applied text-ellipsis, overflow hidden, and nowrap to this div. Take a look at my code: import Image from "next/future/image"; import Link from ...

javascriptcssnext.jstailwind-css

Upon the initial visit to the website, unregistered users will be prompted with a dialog box in Laravel asking them to confirm that they are over 18 years old

In my Laravel 5.2 project, I'm faced with a challenge - how to display a confirmation dialog for users who visit the website for the first time and are not registered, asking them to confirm that they are above 18 years old. To tackle this issue, I be ...

jquerytwitter-bootstraplaravelcookieslaravel-5

How can I modify the text color of the Navbar-Brand class in Bootstrap NavBar?

I have been experimenting with various options to change the text color of the `navbar` and specifically the `navbar-brand` item. However, my `.navbar-brand {color: purple;}` CSS class doesn't seem to be working. Can someone please assist me in determ ...

htmlcssbootstrap-4

I'm having trouble getting my button to work with addEventListener while using Ejs and Express. What could

Creating a Twitter-like platform where I can post tweets and have them display on the same page has been quite challenging. I've set up each post to have an Edit button initially hidden with 'display:none'. However, when I try to click on th ...

javascripthtmlnode.jsexpressejs

What is the best way to incorporate a changing variable within an htmx request?

One of the endpoints in my site requires an ID to be passed as a parameter. For example: mysite.com/product/{id}?limit=5 I'm wondering how to pass the 'id' variable in the hx-get attribute. I can utilize AlpineJS or vanilla JS for this tas ...

javascripthtmlhtmx