Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip is not working in materialize #4369

Closed
prachi708 opened this issue Mar 21, 2017 · 5 comments
Closed

Tooltip is not working in materialize #4369

prachi708 opened this issue Mar 21, 2017 · 5 comments
Labels

Comments

@prachi708
Copy link

prachi708 commented Mar 21, 2017

           <p>
                  <input name="CC1" type="radio" id="CC1"  value="CS"/>
                  <label for="err" style="font-size: smaller">CS</label>
                 
                  <a style="font-weight:bold "  class="btn tooltipped" data-position="right" id="err" data-delay="50" data-tooltip="I am tooltip"> </a>
          </p>
       </div>

CSS
.material-tooltip {
padding: 5px 20px 20px;
border-radius: 10px;
background: rgba(37, 36, 36, 0.9);

overflow: visible;

}

.material-tooltip .backdrop {
display: none !important;
}

.material-tooltip:after {
position: absolute;
content: " ";
top: 47.5%;
left: 0%;
margin-left: -12%;
width: 0;
height: 0;
border-style: solid;
border-width: 13px 0px 20px 13px;
border-color: rgba(37, 36, 36, 0.9) transparent transparent transparent;

border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid rgba(37, 36, 36, 0.9);  

}

SCRIPT

<script> txt="Error"; $(document).ready(function(){ $('.tooltipped').tooltip({delay: 50, html : true}); var anchorElement = $('#err'); anchorElement.attr('data-tooltip', txt); anchorElement.tooltip(); }); </script>

It is working fine in JSFiddle but not in my main code

@acburst
Copy link
Collaborator

acburst commented Mar 21, 2017

If it is working in a jsfiddle and not your main code you should look into how you are calling your dependencies. Are you sure you don't have any errors?

@Nohinn
Copy link

Nohinn commented Mar 22, 2017

In addition to what @acburst said. Are you using any other UI framework that might be conflicting the tooltip function? like jQueryUI, ...

@CorentinMic
Copy link

I can't get tooltips to work neither. It was working for me in version 0.97.7 but when I change the materialize.js to version 0.98.1 tooltips are not working (no error).

@fega
Copy link

fega commented Apr 10, 2017

@prachi708 and @CorentinMic Please provide a codepen, is the best way to see what is exactly happening and how could be resolved

@fega fega added the bug label Apr 10, 2017
@CorentinMic
Copy link

After multiples attempts, I figured out that it was my sass command to update the css file in the new version that hadn't worked. So I was using the old version css file. Tooltips are working in 0.98.1. Sorry for the inconvenience.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

6 participants