TooltipClass not working for jQuery UI

Question

I am referring answers of this question to customize tool tip div styles but not getting it done. Here is my CSS:

 <style type="text/css">
        .ttExtra
        {
            background-color: Black !important;
            color:Red !important;
        }
    </style>

and jQuery:

    <script type="text/javascript">
                $('.userdetails').tooltip({
                    tooltipSourceID: '#userprofile',
                    loader: 1,
                    //loaderImagePath: 'animationProcessing.gif',
                    //loaderHeight: 16,
                    //loaderWidth: 17,
                    width: '400px',
                    height: '200px',
                    tooltipSource: 'inline',
                    borderSize: '2',
                    borderColor :'#000000',
                    tooltipBGColor: '#efefef',
                    tooltipClass: 'ttExtra'
                }); 
</script>

I can't see the styles to my tooltip what I mentioned in css class. What must be wrong here?

Thanks.

[Your code works](http://jsfiddle.net/zg71nwuu/1/). Please [edit] your question to include all code necessary to reproduce the issue. See: [How to create a Minimal, Complete and Verifiable example](//stackoverflow.com/help/mcve). — , Jul 08 '15 at 05:31
@TinyGiant Tried to reproduce but here not even target tooltip is show :( https://jsfiddle.net/zg71nwuu/6/ — Imad, Jul 08 '15 at 06:20
https://jsfiddle.net/zg71nwuu/8/ Aparently `tooltipSourceID` is deprecated, I can't find anything about it it in the documentation. This just updates the `title` attribute to the content of `#userprofile` — , Jul 08 '15 at 20:55

score 0 · Answer 1 · answered Aug 26 '15 at 05:09

To customize a tooltip in jQuery UI (custom styling):

<a href="#" title="This is a tooltip">Tooltips</a>

<script>
  $(function() {
    $( document ).tooltip({
      position: {
        my: "center bottom-20",
        at: "center top",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
      }
    });
  });
  </script>


  <style>
  .ui-tooltip, .arrow:after {
    background: #efefef;
    color:red;
    border:2px solid #000;
    width: 400px;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }
  </style>

TooltipClass not working for jQuery UI

1 Answers1