Hello,

I am trying to put tooltips in my slider and I am not able to get this working right. My CSS code seem to work outside the Slider. I've posted few images. 

Method I am using is, I have CSS code in the CSS Editor with html code in the html section of the layer. The two images attached are for 1, outside the layerslider (all white) 2. In LayerSlider. Please let me know if this is not the correct what to do this...

Any help is very much appreciated. 

Code pasted below....

HTML Section:

<div class="tooltip">Signature Sauce
  <span class="tooltiptext" align="center">Our signature blend of spicy and tangy flavors crafted in-house.</span>
</div>

Here's the CSS Coder:

 /* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 525px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 15px 15px;
    position: absolute;
    z-index: 1;
    bottom: 135%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
word-break:break-all;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

Any Updates on this? No one has does this before? 

Hello.

I really appreciate you looking into this. Just a bit disappointed but I completely understand. 

I still really love it - it is a great product. 

Thanks!