Reputation: 279

Why do bootstrap tooltips not work in bootstrap modals?

My tooltips are working on the mainpage perfectly. In a modal which is generated later by an ajax call the tooltips won't work.

I have included the following code inside the generated modal (result of the ajax call).

To re-ini the tooltips

<script>
  $('.tooltips').tooltip();
</script>

In the html of the modal

  <button class="btn btn-lg default tooltips blue-madison" type="submit"
   name="O" data-container="body" data-placement="top" 
   data-original-title="THIS TEXT FOR TOOLTIPS">
     <i class="fa fa-industry blue-madison"></i> BUTTON1
   </button>

  <button class="btn btn-lg default tooltips green-jungle" type="submit" 
    name="P" data-container="body" data-placement="top"
    data-original-title="THIS TEXT FOR TOOLTIPS">
      <i class="fa fa-user green-jungle "></i> BUTTON2
  </button>

Why don't the tooltips show- what I'm doing wrong?

Upvotes: 16

Answers (6)

syntactic

Reputation: 196

If you are using react I had success with a different answer. All you have to do is give the parent container a ref and then in the overlayTrigger component you just have to pass in the ref as a param to the container.

import React, { Component } from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
    
class random extends Component {
    constructor(props) {
        super(props);
        this.ref=React.createRef()
    }
    
    render() {
        return (
        <div ref={this.ref}>
            <OverlayTrigger
                placement="top"
                container={this.ref}
                overlay={
                    <Tooltip data-container="body">Some text</Tooltip>
                }>
                <span className="d-inline-block">
                    <i className="mdi mdi-help-circle pointer"></i>
                </span>
            </OverlayTrigger>
        </div> 
        );
    }
}

Upvotes: 1

Arcanefoam

Reputation: 717

Another solution is to bind the tooltip to the modal using the container option:

$('#modal').on('shown.bs.modal', function() {
    console.log("modal show");
    $('.tooltips').tooltip({
        container: $(this)
    });
});

Upvotes: 3

Mariana Marica

Reputation: 141

Maybe this helps someone: I had a case when needed with ajax to populate & display a bootstrap modal (render view) on click (calling showModal(url, event) below); bootstrap tooltip and also fengyuanchen/datepicker were unresponsive, so I managed to trigger them after detecting modal loading, like this:

    function showModal(url, event) {
    $.when(
        $.ajax({
            url: url,
            method: 'GET',
            success: function (data) {
                $('#modal-wrapper').html(data);
            }
        })
    ).then(function() {
        $('.loaded_modal').modal().on('shown.bs.modal', function() {
            $('[data-toggle="datepicker"]').datepicker({
                format: "dd/mm/yyyy",
                autoclose: true,
                todayHighlight: true,
                zIndex: 1070,
                container: '.modal'
            });
            $('.modal [data-toggle="tooltip"]')
             .tooltip({trigger: 'hover'}); 
            // could also be on click {trigger: 'hover click'}
        });
    });

Upvotes: 1

Sébastien Pannitti

Reputation: 9

Best way to fix this behaviour is by adding this prop inside your md-tooltip: md-z-index="9999"

Or a different z-index. No need to hardcode this in the css. You can also define the z-index in your scope variable inside your controller as the following

    // in controller
    $scope.btnOptions = {
       isOpen:false,
       label: 'test button',
       class: 'md-scale',
       zIndex: 99999
    };

In your html (normally I would use {{}} to print the variable, but I'm on laravel so I used <% %> instead)

    <md-button aria-label="Édit" class="md-fab md-raised md-mini">
        <md-tooltip md-direction="top" md-z-index="<% btnOptions.zIndex %>">
            Mode édition
        </md-tooltip>
        <i class="far fa-edit"></i>
    </md-button>

Upvotes: 0