javascript - How to close a tooltip message when onblur? -

-

i tried view tooltip message on mobile. when click on tooltip image, show message, message not close when scroll down screen. how can close tooltip message onblur tooltip image? following code works fine when viewed in desktop browser, not on mobile.

/* add attribute element needs tooltip */    [data-tooltip] {    position: relative;    z-index: 2;    cursor: pointer;  }  /* hide tooltip content default */    [data-tooltip]:before,  [data-tooltip]:after {    visibility: hidden;    -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=0)";    filter: progid: dximagetransform.microsoft.alpha(opacity=0);    opacity: 0;    pointer-events: none;  }  /* position tooltip above element */    [data-tooltip]:before {    position: absolute;    bottom: 150%;    left: 50%;    margin-bottom: 5px;    margin-left: -80px;    padding: 7px;    width: 160px;    border-radius: 2px;    border: 1px outset #c0c0c0;    box-shadow: 3px 2px 5px #9f9f9f;    background-color: #000;    background-color: hsla(206, 73%, 34%, 0.9);    color: #ffffff;    content: attr(data-tooltip);    text-align: center;    font-size: 11px;    font-family: "trebuchet ms", helvetica, sans-serif;    font-weight: bold;    line-height: 1.2;  }  /* triangle hack make tooltip speech bubble */    [data-tooltip]:after {    position: absolute;    bottom: 150%;    left: 50%;    margin-left: -5px;    width: 0;    border-top: 5px solid #000;    border-top: 5px solid hsla(206, 73%, 34%, 0.9);    border-right: 5px solid transparent;    border-left: 5px solid transparent;    content: " ";    font-size: 0;    line-height: 0;  }  /* show tooltip content on hover */    [data-tooltip]:hover:before,  [data-tooltip]:hover:after {    visibility: visible;    -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=100)";    filter: progid: dximagetransform.microsoft.alpha(opacity=100);    opacity: 1;  }
<table border="1" width="50%" style="margin:15%;">    <tr>      <td>        <label>age</label><a data-tooltip="this field required. numeric characters.">&nbsp;&nbsp;&nbsp;<img src="http://vignette4.wikia.nocookie.net/community-sitcom/images/a/af/question_mark.png/revision/latest?cb=20120714155934" width="10" height="10"/></a>        </td>      <td>        <input type="text">      </td>    </tr>    <tr height="500px">      <td>        <label>h/p no:</label><a data-tooltip="this field required. numeric characters.">&nbsp;&nbsp;&nbsp;<img src="http://vignette4.wikia.nocookie.net/community-sitcom/images/a/af/question_mark.png/revision/latest?cb=20120714155934" width="10" height="10"/></a>        </td>      <td>        <input type="text">      </td>    </tr>  </table>


Comments

Post a Comment

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

-
i trying parse date 2014-12-03t10:05:59.5646+08:00 using these 2 formats: yyyy-mm-dd't'hh:mm:ss yyyy-mm-dd't'hh:mm:ssxxx when parse using yyyy-mm-dd't'hh:mm:ss works fine, when parse yyyy-mm-dd't'hh:mm:ssxxx parseexception thrown. which correct format parse date , difference between these 2 formats? note : cannot use joda :( those valid formats: yyyy-mm-dd't'hh:mm:ss.sssz >>> e.g.: 2001-07-04t12:08:56.235-0700 yyyy-mm-dd't'hh:mm:ss.sssxxx >>> e.g.: 2001-07-04t12:08:56.235-07:00 edit: btw, "x" refer (iso 8601 time zone)
Read more

c# - Get rid of xmlns attribute when adding node to existing xml -

-
i have xml-file: <ns2:root xmlns:ns2="namespace"> <ns2:a> <ns2:b>some content</b> <ns2:c>some content</c> <ns2:d>some content</d> </a> </root> i need add new node in specific place, code is: var doc = xdocument.load(file); xnamespace ns2 = "namespace"; doc.element(ns2 + "root").element(ns2 + "a").element(ns2 + "c").addafterself( new xelement(ns2+"new", new xelement("new1", new xelement("new2","some content"), new xelement("new3", "some content")))); the output is: <ns2:root xmlns:ns2="namespace"> <ns2:a> <ns2:b>some content</b> <ns2:c>some content</c> <ns2:new> <new1 xmlns=""> <new2>some content</new2> ...
Read more