html - display tooltip bottom of the button when hover state -


here website link

in first row of button,, when hover, tooltip displayed , hidden background image.

so need display bottom of button first row.

i tried css:

.swatch .tooltip, .bullet li .tooltip{   text-align:center;   background:gray;   color:#fff;   bottom:80%;   padding-top: 5px;   padding-bottom: 5px;   padding-left: 0px;   padding-right: 0px;   display:block;   position:absolute;   width:100px;   left:-23px;   margin-bottom:10px;   /* make invisible default */   filter:alpha(opacity=0);   -khtml-opacity: 0;   -moz-opacity: 0;   opacity:0;   visibility:hidden;   /* animations */   -webkit-transform: translatey(10px);      -moz-transform: translatey(10px);       -ms-transform: translatey(10px);        -o-transform: translatey(10px);           transform: translatey(10px);   -webkit-transition: .25s ease-out;      -moz-transition: .25s ease-out;       -ms-transition: .25s ease-out;        -o-transition: .25s ease-out;           transition: .25s ease-out;   -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);      -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);       -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);        -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);           box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);   z-index: 10000;   -moz-box-sizing:border-box;    -webkit-box-sizing:border-box;    box-sizing:border-box; } .swatch .tooltip:before, .bullet li .tooltip:before {   bottom:-20px;   content:" ";   display:block;   height:20px;   left:0;   position:absolute;   width:100%; } /* css triangle */ .swatch .tooltip:after, .bullet li .tooltip:after {   border-left:solid transparent 10px;   border-right:solid transparent 10px;   border-top:solid gray 10px;   bottom:10px;   content:" ";   height:0;   left:50%;   margin-left:-13px;   position:absolute;   width:0;  } .swatch .swatch-element:hover .tooltip, .bullet li:hover .tooltip {   filter:alpha(opacity=100);   -khtml-opacity:1;   -moz-opacity:1;   opacity:1;   visibility:visible;   -webkit-transform:translatey(0px);      -moz-transform:translatey(0px);       -ms-transform:translatey(0px);        -o-transform:translatey(0px);           transform:translatey(0px); } .bullet li .tooltip{left:-30px;font-family:lato;font-size:15px;}

may know, how can this?

any highly appreciated.

thanks in advance.

you have change position of tooltip.

i've changed arrow direction (from border-top border-bottom):

border-bottom-color: #000; border-bottom-color: hsla(0, 0%, 20%, 0.9);

and i've changed position of tooltip itself:

bottom: -60px;

here's working fiddle: http://jsfiddle.net/alessiozuccotti/zbbf7cp2/3/

if want affect first row, apply class on these elements or, if they're grouped rows (different element) add class on first row can target children.


-

Comments

Post a Comment

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

there several posts converting mat bitmap using utils.mattobitmap() function. i'm assuming function can called in java layer after importing utils class. i want transfer data memory address pointed uint32_t* bmpcontent; in code below. jniexport void jnicall java_com_nod_nodcv_nodcvactivity_runfilter( jnienv *env, jclass clazz, jobject outbmp, jbytearray indata, jint width, jint height, jint choice, jint filter) { int outsz = width*height; int insz = outsz + outsz/2; androidbitmapinfo bmpinfo; if (androidbitmap_getinfo(env, outbmp, &bmpinfo) < 0) { throwjavaexception(env,"gaussianblur","error retrieving bitmap meta data"); return; } if (bmpinfo.format != android_bitmap_format_rgba_8888) { throwjavaexception(env,"gaussianblur","expecting rgba_8888 format"); return; } uint32_t* bmpcontent; if (androidbitmap_lockpixels(env, outbmp,(void**)&bmpcontent)...
Read more

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

i trying hit soap api in application login purpose , getting above mentioned error , can 1 tell me going wrong , first time soap apis. here code hit soap :- vector<object> args = new vector<object>(); hashtable<string, object> hashtable = new hashtable<string, object>(); hashtable.put("email", "mss.siddhart28@gmail.com"); hashtable.put("password", "siddharth"); args.add(hashtable); soapserializationenvelope envelope = new soapserializationenvelope( soapenvelope.ver11); envelope.dotnet = true; envelope.xsd = soapserializationenvelope.xsd; envelope.enc = soapserializationenvelope.enc; (new marshalhashtable()).register(envelope); httptransportse androidhttptransport = new httptransportse( "http://tempuri.org/", 15000); androidhttptransport.debug = true; string result = ""; try { soapobject request = new soapobject("http:...
Read more

python - How to remove the Xframe Options header in django? -

i have made page has iframe . inside iframe want show multiple different links article facebook, or news, or youtube video or other possible url. but, due xframe header, unable so. referred following link: https://docs.djangoproject.com/en/1.8/ref/clickjacking/ , django xframeoptionsmiddleware (x-frame-options) - allow iframe client ip but didn't help. my settings.py file's middleware_classes is: middleware_classes = ( 'django.contrib.sessions.middleware.sessionmiddleware', 'django.middleware.common.commonmiddleware', 'django.middleware.csrf.csrfviewmiddleware', 'django.contrib.auth.middleware.authenticationmiddleware', 'django.contrib.auth.middleware.sessionauthenticationmiddleware', 'django.contrib.messages.middleware.messagemiddleware', 'django.middleware.clickjacking.xframeoptionsmiddleware', ) from http://django-secure.readthedocs.org/en/latest/middleware.html , found using ...
Read more