Tooltips are not working on Fixed and Floating Buttons

Topic: Tooltips are not working on Fixed and Floating Buttons

Venky free asked 5 years ago

Hi There,

I've tried the tooltip component on Buttons and Icons which is working fine, but on Fixed and Floating Button components it is not working. We are using v4.9.0 which is not listed in the given field (selected 4.8.4). I've debugged the code, the tooltip element is coming on hover and mouse leave events, but not visible on the screen. Please provide us a solution.

Thanks :)

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Hey,

Try this code:

import React from 'react';
import { MDBTooltip, MDBBtnFixed } from 'mdbreact';

const TooltipsPage = () => {

  return (
    <MDBTooltip
      placement="bottom"
    >
      <MDBBtnFixed floating color="indigo" icon="pencil-alt" style={{ padding: 0, bottom: "145px", right: "24px" }} />
      <div>
        MDBTooltip on fixed button
      </div>
    </MDBTooltip>
  )
}

export default TooltipsPage;

Also to be sure that your package is completely up-to-date I suggest to remove node_modules and the install dependencies again.

Best,

Jakub

Add comment

Venky free answered 5 years ago

0 0 Best answer

Hey Jakub,

We've got the new version of MDBR (v4.12.0).

I can see some major changes to the code in the documentation but the issue remains same for me as it is not working for Fixed and Floating Buttons

Can you please check and update on that

Thanks :)

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

Thanks for the code.

That component has not been changed for a long time.

It looks like we could do some improvements for it. I tried to solve your problem with no success.

Will get back to you when will will manage the improvements.

Thanks for reporting.

Best,

Jakub

Venky free commented 5 years ago

Hey Jakub,

Can we've the response for the above issue

Thanks :)

Jakub Mandra staff commented 5 years ago

Hi Venky,

We are sorry, we had a busy time working on new plugins (and other priorities), which will be released in next week. But we are planning to get done to do fixes in closest releasement, so this task will gain priority now.

Best,

Jakub

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

Hi,

Could you please provide some code with your implementation for Fixed and Floating Buttons. Concretely Tooltips were meant to work with basic components, but we are open for any suggestions and we would willingly implement solution for your problem.

Best,

Jakub

Venky free commented 5 years ago

Hi,

Please check the below code

            <MDBTooltip placement="top" tag="div" tooltipContent="floating button right aligned">
                <MDBBtn floating size="sm" color="green" className="float-right">
                    <MDBIcon icon="ban" />
                </MDBBtn>
            </MDBTooltip>

            <MDBTooltip placement="top" tag="div" tooltipContent="fixed button right aligned">
                <MDBBtnFixed floating size="lg" color="red" icon="pencil-alt" style={{ bottom: "25px", right: "25px" }} />
            </MDBTooltip>

Please let me know for any further information

Thanks :)

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.8.4
Device: Laptop
Browser: Chrome
OS: Windows
Provided sample code: No
Provided link: No

Venky

177Support score
23Questions 6Answers 0Snippets