tooltip does not work

[ckim16]

I have something like this

return (
  <div className="hint hint--html hint--info hint--top" style={style}>
    <div>{this.props.users}</div>
    <div style={{width: 80}} className="hint__content">
      ?
    </div>
  </div>
);

and I don't get hover tooltip working for my app. Has anyone had similar issue or know how to fix this?

Thank you,

[paulincai]

What do you have in style?

[ckim16]

It's a code that I got from google-map-react-example. wanted to do it myself and understand how it works.

style looks like

const style = this.props.hover ? greatPlaceStyleHover : greatPlaceStyle;

const K_SIZE = 35;

const greatPlaceStyle = {
  position: 'absolute',
  width: K_SIZE,
  height: K_SIZE,
  left: -K_SIZE / 2,
  top: -K_SIZE / 2,

  border: '5px solid #f44336',
  borderRadius: K_SIZE,
  backgroundColor: 'white',
  textAlign: 'center',
  color: '#3f51b5',
  fontSize: 16,
  fontWeight: 'bold',
  padding: 4,
  cursor: 'pointer'
};

const greatPlaceStyleHover = {
  ...greatPlaceStyle,
  border: '5px solid #3f51b5',
  color: '#f44336'
};

something like this..I thought className="hint hint--html hint--info hint--top" and className="hint__content" would take care of the tooltip but it does not display on hover event. Trying to find out why.

[paulincai]

What I'd do: make sure I can access the css classes as "globals". I don't know what editor you are using and what environment. I'm on Meteor so everything is taken care of in terms of compiling. I'd remove the styling for the time being. You can style with classes afterwards. The styling is really not necessary do display the tooltip. I'd see what happens when in Chrome inspector, I select the div which has the "hint" class and with a right click I select :hover. Does it respond to click?

[ckim16]

I'm currently using atom and webpack and I do not have any css modules included in my webpack. The problem that I see is when I hover on the thing, css is the only thing responding to it. After I selected the 'hint' class and click :hover after right click, it still does not respond to my click either (sorry, I'm not super good at css so I hope I did it correct)

Before hover, Even if I remove the style, the tooltip content is still shown which is ?.

After hover,

As I mentioned, no matter what I do, ? is still there.

Hope this has given you a better idea about my problem.

[paulincai]

@ckim16 Would you please import this at the top of your main.js or the top of your main js file:

import 'html-hint/dist/html-hint.min.css'

[ckim16]

I put import 'html-hint/dist/himl-hint.min.css' on top of my file and it gives me error saying

./node_modules/html-hint/dist/html-hint.min.css
Module parse failed: ..../node_modules/html-hint/dist/html-hint.min.css Unexpected token (1:11)
You may need an appropriate loader to handle this file type.
| [data-hint]{position:relative;display:inline-block}[data-hint]:before,[data-hint]:after{position:absolute;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);visibility:hidden;opacity:0;z-index:1000000;pointer-events:none;-webkit-transition:0.3s ease;-moz-transition:0.3s ease;transition:0.3s ease;-webkit-transition-delay:0ms;-moz-transition-delay:0ms;transition-delay:0ms}[data-hint]:hover:before,[data-.......

I tried at different files as well but it still gives me an error.

I even tried like

@import 'html-hint/dist/html-hint.min.css'

.marker
  composes: hint--html
  composes: hint--top
  composes: hint--hoverable
  cursor: pointer

.tooltip
  composes: hint__content

and give className of marker and tooltip to a component and my content just disappears but tooltip does not display.

[paulincai]

I don't know what to say. I had the same issue as you earlier, showing some content but nothing else . In your case you could see '?' Then I imported the css as I also told you. I think you don't avail of the actual CSS. Meteor is very complex and ... complete in the way it handles everything so I don't know what to think of. Look, for instance, do you have a less compiler? Can you write less or css in '.less' files? It might be that you are not compiling the html-hint.min.css. I would also try to import it into the main css file (but not the min version).

[ckim16]

I have downloaded css-loader, less-loader, and style-loader and put them into my webpack.config.js like

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-1']
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  plugins: [
    new ExtractTextPlugin('style.css')
  ],
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

but it still does not work. Do you see anything wrong in my code?

[kpennell]

couldn't get it to work either