css3 - How can I create a "tooltip tail" using pure CSS? -

-

i came across neat css trick. check out fiddle...

.tooltiptail {    display: block;    border-color: #ffffff #a0c7ff #ffffff #ffffff;    border-style: solid;    border-width: 20px;    width: 0px;    height: 0px;  }  .anothertail {    background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);    display: block;    height: 29px;    width: 30px;  }
<div>cool trick:    <br />    <div class="tooltiptail"></div>  </div>  <br />    <div>how effect css?    <br />    <div class="anothertail"></div>  </div>

this creates little arrow/triangle-like effect, "tooltip tail". blows mind! i'm interested in knowing how works?!

further, there way extend css trick create effect follows:

enter image description here

this interesting problem. can done using css, ignoring shadow now?

update 1

i figured out solution initial question. here's fiddle...

http://jsfiddle.net/duzax/7/

html

<div style="position: relative;">cool trick:<br />     <div class="tooltiptail"></div>     <div class="tooltiptail2"></div> </div>

css

.tooltiptail {     display: block;     border-color: #ffffff #a0c7ff #ffffff #ffffff;     border-style: solid;     border-width: 20px;     width: 0px;     height: 0px; } .tooltiptail2 {     display: block;     border-color: transparent #ffffff transparent transparent;     border-style: solid;     border-width: 18px;     width: 0px;     height: 0px;     position: relative;     left: 4px;     top: -38px; }

now, how mimic little picture above using pure css, including shadow , having cross-browser compatible?

update 2

here's solution after combination of answers below. haven't tested across multiple browsers, looks great in chrome.

http://jsfiddle.net/unsunghero97/mzxcj/688/

html

<div id="tooltip">     <p>i can haz css tooltip</p>     <div id="tailshadow"></div>     <div id="tail1"></div>     <div id="tail2"></div> </div>

css

#tooltip {     background-color: #ffffff;     border: 1px solid #73a7f0;     width: 200px;     height: 100px;     margin-left: 32px;     position:relative;     border-radius: 4px;     -moz-border-radius: 4px;     -webkit-border-radius: 4px;     box-shadow: 0px 0px 8px -1px black;     -moz-box-shadow: 0px 0px 8px -1px black;     -webkit-box-shadow: 0px 0px 8px -1px black; }  #tooltip p {     padding:10px; }  #tailshadow {     background-color: transparent;     width: 4px;     height: 4px;     position: absolute;     top: 16px;     left: -8px;     z-index: -10;     box-shadow: 0px 0px 8px 1px black;     -moz-box-shadow: 0px 0px 8px 1px black;     -webkit-box-shadow: 0px 0px 8px 1px black; }  #tail1 {     width: 0px;     height: 0px;     border: 10px solid;     border-color: transparent #73a7f0 transparent transparent;     position:absolute;     top: 8px;     left: -20px; }  #tail2 {     width: 0px;     height: 0px;     border: 10px solid;     border-color: transparent #ffffff transparent transparent;     position:absolute;     left: -18px;     top: 8px; }

here's example box-shadow, latest version browsers should support this

http://jsfiddle.net/mzxcj/1/

html:

<div id="tooltip">     <p>i can haz css tooltip</p>     <div id="tailshadow"></div>     <div id="tail1"></div>     <div id="tail2"></div> </div>

css:

body {font-family:helvetica,arial,sans-serif;}  #tooltip {     position:relative; }  #tooltip p {     padding:10px;     background-color:#f9f9f9;     border:solid 1px #a0c7ff;     -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px; }  #tailshadow {     position:absolute;     bottom:-8px;     left:28px;     width:0;height:0;     border:solid 2px #fff;     box-shadow:0 0 10px 1px #555; }  #tail1 {     position:absolute;     bottom:-20px;     left:20px;     width:0;height:0;     border-color:#a0c7ff transparent transparent transparent;     border-width:10px;     border-style:solid; }  #tail2 {     position:absolute;     bottom:-18px;     left:20px;     width:0;height:0;     border-color:#f9f9f9 transparent transparent transparent;     border-width:10px;     border-style:solid; } 

body {    font-family: helvetica, arial, sans-serif;  }  #tooltip {    position: relative;  }  #tooltip p {    padding: 10px;    background-color: #f9f9f9;    border: solid 1px #a0c7ff;    -moz-border-radius: 5px;    -ie-border-radius: 5px;    -webkit-border-radius: 5px;    -o-border-radius: 5px;    border-radius: 5px;  }  #tailshadow {    position: absolute;    bottom: -8px;    left: 28px;    width: 0;    height: 0;    border: solid 2px #fff;    box-shadow: 0 0 10px 1px #555;  }  #tail1 {    position: absolute;    bottom: -20px;    left: 20px;    width: 0;    height: 0;    border-color: #a0c7ff transparent transparent transparent;    border-width: 10px;    border-style: solid;  }  #tail2 {    position: absolute;    bottom: -18px;    left: 20px;    width: 0;    height: 0;    border-color: #f9f9f9 transparent transparent transparent;    border-width: 10px;    border-style: solid;  }
<div id="tooltip">    <p>i can haz css tooltip</p>    <div id="tailshadow"></div>    <div id="tail1"></div>    <div id="tail2"></div>  </div>


Comments

Post a Comment

Popular posts from this blog

php - What is the difference between $_SERVER['PATH_INFO'] and $_SERVER['ORIG_PATH_INFO']? -

-
what’s difference between $_server['path_info'] , $_server['orig_path_info'] ? how use them? when run print_r($_server) , path_info , orig_path_info not present in array. why not? how can enable them? i have read php manual on them, still don’t understand them. the path_info variable present if invoke php script this: http://www.example.com/phpinfo.php/hello_there it's /hello_there part after .php script. if don't invoke url that, there won't $_server["path_info"] environment variable. the porig_ prefix uncommon. path_info standard cgi-environment variable, , should never prefixed. did read that? (there issues around php3/php4 if invoked php interpreter via cgi-bin/ - hardly has such setups today.) for reference: http://www.ietf.org/rfc/rfc3875
Read more

fortran - Function return type mismatch -

-
i'm attempting recode old c++ program in fortran make use of lapack (i'm aware c++ have lapack++, i'm having lot of trouble installing it, gave up). i didn't have problems compilation, when had variables declared real . when started coding section of program required lapack, found parameters passed dsyev need double precision . tried change double precision (including changing hard coded numbers double precision counterparts, i.e. 0.0 -> 0.0d0) when try compile, following error of functions , subroutines i've written: error: return type mismatch of function <function> @ (1) (real(4)/real(8)) i'm not sure coming from, in program has been changed double precision. for example, i've declared following: double precision :: alpha(3),d(3),zeta1,zeta2 double precision :: a1(3),a2(3),d1(3),d2(3) double precision :: pi pi = 3.14159265359d0 alpha = (/0.109818d0, 0.405771d0, 2.22766d0/) d = (/0.444635d0, 0.535328d0, 0.154329d0 /) 10 i=1,3 ...
Read more

queue - mq_receive: message too long -

-
i implementing communication between 2 processes using queue. problem when call function mq_receive, error: message long. i have done following: struct mq_attr attr; long size = attr.mq_msgsize; .... // initializing queue "/gateway" int rc = mq_receive(gateway, buffer, size, &prio); if print size value, size=1, while when print same size program (got same mechanism), not long integer ( -1217186280 )... how can solve error?....so while size = 1, believe it's right "message long" why 1? p.s. have tried put : int rc = mq_receive(gateway, buffer, sizeof(buffer), &prio); but no result. it seems need read docs more carefully. when call mq_receive should pass size of destination buffer. this size must greater mq_msgsize attribute of queue . in addition, seems have error in queue attributes initialisation makes proper mq_receive call impossible. here standard message queue session: fill mq_attr struct ( doc ): struct mq_a...
Read more