发表新帖
发表新帖

Bootstrap tooltip doesn't show style of the tooltip, only data

前端 未结
关注
11 1671
礼貌的吻别
礼貌的吻别 2021-02-05 06:13

Trying to make Bootstrap show the tooltip function, I have followed exactly as Bootstrap DOC about Tooltips and declare my attribute and properties. when I hover over the text t

相关标签:
11条回答
  • 南旧
    2021-02-05 06:53

    The OP described precisely the issue I was seeing in Angular 8 with Bootstrap 4.4.1 using JQuery 3.4.1 and not using ng-bootstrap or ngx-bootstrap. The image in the OP is bang on.

    Some of the answers were sort of helpful while missing the key point that if the DIV is wrapped in an *ngIf it is difficult to get tooltip() to see that the DIV should have a listener attached to it for mouseenter / mouseleave events. Doing this as the document loads the first time is useless for a single page application where the content is dynamically added and removed.

    The critical answer turned up https://github.com/twbs/bootstrap/issues/4215 and codepen https://codepen.io/Johann-S/pen/djJYPb . For me the fix was ...

    app.component.ts ... just once in this one file is enough

    import { Component } from '@angular/core'
declare var $: any
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.sass']
})
export class AppComponent {
    constructor(){
        $('body').tooltip({
            selector: '[data-toggle="tooltip"]'
        })
    }
}

    and in every place the tooltip should be seen (component.html files for me).

    <div data-toggle="tooltip" data-placement="top" title="Tool Tip Text">

    Binding to the body allows the tooltip selector to see the addition of any 'new' DOM elements irrespective of the timing.

    As to the performance hit ... not sure yet :D, though it is mercifully light on typing.

    0 讨论(0)
  • 遥遥无期
    2021-02-05 06:57

    Remember also that Bootstrap Tooltip don't like jQuery UI (there are a few names conflict and 'tooltip' is one of them).

    The solution is changing the script loading order: jQuery UI first, bootstrap.js after.

    0 讨论(0)
  • 自闭症患者
    2021-02-05 06:58

    All your jquery*.js files must come before bootstrap.js.

    jquery-{version}.js
jquery-confirm.min.js
jquery-ui-{version}.js
jquery.validate*
etc...
bootstrap.js

    Then use:

    <script>
$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
    0 讨论(0)
  • 予麋鹿
    2021-02-05 07:00

    Here's a working template for you. My guesses as to what was wrong:

    1. jQuery always needs to come before bootstrap.js.
    2. If you don't have a local server running, you need to add the http: to the CDN addresses.
    3. You may have been trying to initialize the tooltip in the head tags. Problem is that the document probably wasn't ready.

    The following works fine.

    HTML:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script>
    $( document ).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
    });
    </script>
  </body>
</html>
    0 讨论(0)
  • 难免孤独
    2021-02-05 07:07

    If you are using popper.js with bootstrap 4, instead of using:

    <script src="~/Scripts/popper.min.js"></script>

    use the .js in the UMD directory: 

    <script src="~/Scripts/umd/popper.min.js"></script>
    0 讨论(0)
  • 不思量自难忘°
    2021-02-05 07:11

    Your problem is more than likely that you failed to initialize the tooltip correctly. Take a look at this bootply

    The documents state:

    enter image description here

    HTML:

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

    Jquery:

    $("[data-toggle=tooltip").tooltip();
    1. Remember you only need bootstrap.min.css and bootstrap.js for the tooltip to work correctly.
    2. Remember to load scripts and style sheets using absolute URLs (add / in front of path).
    3. bootstrap depends on jquery, load jquery first.
    0 讨论(0)
 看不清?
提交回复
热议问题