search

sapo / Ink

An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping
http://ink.sapo.pt
MIT License
1.9k stars 258 forks source link

tooltip not showing up #487

Closed dschinkel closed 6 years ago

dschinkel commented 6 years ago

not sure what the deal is here. This is a React component. Badge shows fine:

    return(
      <div className="company-link vertical-align-top inline-block">
        <div><li className="margin-0">{link}</li></div>
        { hasApprenticeship &&
          <div className="align-center ft-tags margin-0">
            <span
              className="ink-tooltip ink-badge category-badge font-9 inline ft-apprenticeship-tag"
              data-tip-color="red"
              data-tip-text="offers apprenticeships"
              data-tip-where="up"
            >A</span>
          </div>
        }
      </div>);

when I mouse over the badge the tooltip is not showing up though. In my index.html I do have sapo referenced:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="alternate" type="application/rss+xml" title="We Do TDD - Companies & Teams Practicing Test Driven Development" href="http://feeds.feedburner.com/WeDoTdd-AListOfCompaniesPracticingTestDrivenDevelopment"/>
        <link rel="stylesheet" type="text/css" href="http://fastly.ink.sapo.pt/3.1.10/css/ink.min.css">
        <script type="text/javascript" src="http://fastly.ink.sapo.pt/3.1.10/js/ink-all.min.js"></script>
        <script type="text/javascript" src="http://fastly.ink.sapo.pt/3.1.10/js/autoload.js"></script>
        <!--[if lt IE 9 ]>
        <link rel="stylesheet" href="ink-ie.min.css" type="text/css">
        <![endif]-->
        <link rel="stylesheet" type="text/css" href="/lib/css/master.css" />
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="/scripts/app.bundle.js"></script>
    </body>
</html>
dschinkel commented 6 years ago

I've got autoload.js imported so not sure why it's not working.

screen shot 2018-01-04 at 4 11 25 pm

dschinkel commented 6 years ago

solution

componentDidMount() {
    setTimeout(() => {
      const target = ReactDOM.findDOMNode(this);
      if(target) {
        new Ink.UI.Tooltip('#tags .ft-apprenticeship-tag');
      }
    }, 200);
  }