Форум

рони · #21 (**permalink**) 26.08.2017, 19:08

Сообщение от konart

Правда подсказка прячется за верхний и правый край.

у меня ничего не прячется...

konart · #22 (**permalink**) 26.08.2017, 19:20

понял. Попробую сам решить. Ещё раз СПАСИБО!!!

konart · #23 (**permalink**) 30.08.2017, 10:50

Добрый день!
РОНИ помогай, ничего не выходит. Подсказки прячутся за край и никак я их оттуда не могу вытащить . если фиксирую - они прячутся за закраской ячейки. Ещё такой момент - я пробовал вот такой вариант подсказки и он мне нравился тем что стиль подсказки соответствовал стилю закраски ячейки, но приходилось писать SPAN для каждой ячейки. Это утомительно. В твоём варианте этот вопрос решён. А как бы мой вариант совместить с твоим? Я пробовал, но решение так и не нашёл. Помоги!!! ВОт код с моей подсказкой в стиле ячеек:

.tooltip {
			border-bottom: 1px dotted #000000; color: #000000; outline: none;
			cursor: help; text-decoration: none;
			position: relative;
		}
		.tooltip span {
			margin-left: -99em;
			position: absolute;
		}
		.tooltip:hover span {
			border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
			box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 15px 15px rgba(0, 0, 0, 0.7); -moz-box-shadow: 15px 15px rgba(0, 0, 0, 0.7);
			position: absolute; left: 1em; top: 200em; z-index: 99;
			margin-left: 0; width: 50px;
		}


		.ALLIN { padding: 0.8em 1em; }
		.custom { padding: 0.5em 0.8em 0.8em 2em; }
		* html a:hover { background: transparent; }

		.ALLIN{
border: 1px solid #FFAD33; 
font:16px helvetica, arial, sans-serif; /*  helvetica, arial, sans-serif*/
color : White; /*#ccc #666 #000 White*/
font-weight:800;
background-color:DarkGreen;

}





		.Limp-Call{
background: #8B8B00; 
border: 1px solid #FFAD33; 
font:22px verdana, arial, helvetica, sans-serif; /* רנטפע, נאחלונ רנטפעא */
color : #000; /* צגוע רנטפעא */
font-weight:900; /* םאסשוםםמסע רנטפעא */


}

рони · #24 (**permalink**) 30.08.2017, 10:55

konart,
макет полностью сделайте

konart · #25 (**permalink**) 30.08.2017, 11:18

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 #myTBL td.DarkGreen
 {
 font:14px helvetica, arial, sans-serif;
 color : White;
 font-weight:800;
 background-color:DarkGreen;
background: linear-gradient(180deg, DarkGreen 95%, Black 5%);
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
border-radius: 5px 5px; -webkit-border-radius: 5px;
z-index: 1;
opacity:0.99;
 }


 #myTBL td.Indigo
 {
font:14px helvetica, arial, sans-serif; /*  helvetica, arial, sans-serif*/
color : White; /*#ccc #666 #000 White*/
font-weight:800;
background-color:Indigo;
background: linear-gradient(180deg, Indigo 95%, Black  5%);
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
border-radius: 5px 5px; -webkit-border-radius: 5px; 
z-index: 1;
opacity:0.99;
 }

 #myTBL td.YellowGreen
 {
font:14px helvetica, arial, sans-serif; /*  helvetica, arial, sans-serif*/
color : #000000; /*#ccc #666 #000 White*/
font-weight:700;
background-color:YellowGreen;
background: linear-gradient(180deg, YellowGreen 95%, DarkOliveGreen 5%, Black);
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
border-radius: 5px 5px; -webkit-border-radius: 5px; 
z-index: 1; 
opacity:0.99;
 }
 
 
 
 td{
   height: auto;/*23*/
	cursor: url('images/cursor-question.png'), url('images/861313825289482149.png'), pointer;
opacity:0.99;
 }
 td{
    position: relative;
 }

 td:after {
    position:  absolute;

 }

  #myTBL td:hover:after {
    background-color: Gray;      /*стиль подсказки*/
	 font:14px helvetica, arial, sans-serif;
    color : Lavender;
	 font-weight:700;
    border-radius: 1px;
    padding: 4px;/*8*/
    opacity: 1;/*1*/
	border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.6); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.6); -moz-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.6);
z-index: 10; 
 }
 
 
td.DarkGreen:after{
 width: 70px;
 opacity:0;
 content: "ALLIN и ещё много много текста";
 left:0;
 bottom: 30px;

 }
 td.Indigo:after{ 
 opacity:0;
    content: "Raise-4bet-Allin и ещё много много текста";
 left:0;
 bottom: 30px;
 width: 70px;
 }
 
 td.YellowGreen:after{ 
 opacity:0;
   content: "raise-Call 3beta и ещё много много текста";
 left:0;
 bottom: 30px;
 width: 70px;

 }
  </style>
  <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
  <script>
   window.addEventListener('DOMContentLoaded', function() {
     var table = document.querySelector('#myTBL'),
         color = document.querySelectorAll('[name="COLOR"]');
     table.addEventListener('click', function() {
     var target = event.target;
        if (target.closest("td")) {
            [].forEach.call( color, function(el) {
                   el.checked && !target.classList.contains(el.id)?  target.classList.add(el.id) : target.classList.remove(el.id);
            });
        }


     });
       });
  </script>
</head>

<body>
 <table width="100%" height="100%" id="myTBL" class="select">

 <tr>
 <td class="oAK" bgcolor="PaleGoldenrod">
 AK
 </td>
 <td class="aKK" bgcolor="#BEBEBE">
 KK
 </td>
 <td class="sKQ" bgcolor="PaleGreen">
 KQ
 </td>
 <td class="sKJ" bgcolor="PaleGreen">
 KJ
 </td>
 <td class="sKT" bgcolor="PaleGreen">
 KT
 </td>

 </tr>
 <tr>
 <td class="oAQ" bgcolor="PaleGoldenrod">
 AQ
 </td>
 <td class="oKQ" bgcolor="PaleGoldenrod">
 KQ
 </td>
 <td class="aQQ" bgcolor="PaleGoldenrod">
 QQ
 </td>
 <td class="sQJ" bgcolor="PaleGreen">
 QJ
 </td>
 <td class="sQT" bgcolor="PaleGreen">
 QT
 </td>

 </tr>
 <tr>
 <td class="oAJ" bgcolor="PaleGoldenrod">
 AJ
 </td>
 <td class="oKJ" bgcolor="PaleGoldenrod">
 KJ
 </td>
 <td class="oQJ" bgcolor="PaleGoldenrod">
 QJ
 </td>
 <td class="aJJ" bgcolor="#BEBEBE">
 JJ
 </td>
 <td class="sJT" bgcolor="PaleGreen">
 JT
 </td>

 </tr>

 </table>
 <input type="radio" id="DarkGreen" name="COLOR" value=""  checked="checked">
 <label for="DarkGreen">DarkGreen</label>
 <input type="radio" id="Indigo" name="COLOR" value="" >
 <label for="Indigo">Indigo</label>
 <input type="radio" id="YellowGreen" name="COLOR" value="">
 <label for="YellowGreen">YellowGreen</label>
</body>
</html>

Для правильной оценки ситуации окно броузера должно быть минимальным!!! Это текущий вариант сделанный по твоим рекомендациям.

konart · #26 (**permalink**) 30.08.2017, 11:24

подсказка работающая ранее была сделана с использованием CSS тот что я выложил ранее и ячеек типа:

<td class="tooltip">
<a>Li<span class="custom Liamp-3bet">Liamp - 3bet value</span></a>
</td>

Тогда появляющаяся подсказка имеет стиль как у ячейки...

konart · #27 (**permalink**) 30.08.2017, 11:28

классы в примере не соответствуют, чтобы работало нужно:

<td class="zag3 tooltip">
<a>Li<span class="custom ALLIN">Liamp - 3bet value</span></a>
</td>

или "custom Limp-Call"

konart · #28 (**permalink**) 30.08.2017, 11:40

ещё такой момент - в текущем варианте появившаяся подсказка мешает переключению ячеек попавших под неё!

konart · #29 (**permalink**) 30.08.2017, 12:19

в этой связи великолепное свойство у стандартной подсказки TITLI она появляется и может выходить даже за пределы окна броузера - СУПЕР!!!

рони · #30 (**permalink**) 30.08.2017, 12:40

konart,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    #myTBL td.DarkGreen, .ui-tooltip.DarkGreen
 {
 font:14px helvetica, arial, sans-serif;
 color : White;
 font-weight:800;
 background-color:DarkGreen;
background: linear-gradient(180deg, DarkGreen 95%, Black 5%);
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
border-radius: 5px 5px; -webkit-border-radius: 5px;
z-index: 1;
opacity:0.99;
 }


 #myTBL td.Indigo,  .ui-tooltip.Indigo
 {
font:14px helvetica, arial, sans-serif; /*  helvetica, arial, sans-serif*/
color : White; /*#ccc #666 #000 White*/
font-weight:800;
background-color:Indigo;
background: linear-gradient(180deg, Indigo 95%, Black  5%);
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
border-radius: 5px 5px; -webkit-border-radius: 5px;
z-index: 1;
opacity:0.99;
 }

 #myTBL td.YellowGreen, .ui-tooltip.YellowGreen
 {
font:14px helvetica, arial, sans-serif; /*  helvetica, arial, sans-serif*/
color : #000000; /*#ccc #666 #000 White*/
font-weight:700;
background-color:YellowGreen;
background: linear-gradient(180deg, YellowGreen 95%, DarkOliveGreen 5%, Black);
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
border-radius: 5px 5px; -webkit-border-radius: 5px;
z-index: 1;
opacity:0.99;
 }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {




$("#myTBL").on("click", "td", function() {
  var target = this, rem = 0, len =
$('[name="COLOR"]').each(function(indx, el){
      el.checked && !target.classList.contains(el.value)?
      $( target ).addClass(el.value).attr("title", el.value).tooltip({tooltipClass : el.value}).tooltip("open"): ($( target ).removeClass(el.value), rem++);
      }).length;
if(rem == len) $( target ).tooltip("destroy").removeAttr("title");

});


});
  </script>
</head>

<body>
<table width="100%" height="100%" id="myTBL" class="select">

 <tr>
 <td class="oAK" bgcolor="PaleGoldenrod">
 AK
 </td>
 <td class="aKK" bgcolor="#BEBEBE">
 KK
 </td>
 <td class="sKQ" bgcolor="PaleGreen">
 KQ
 </td>
 <td class="sKJ" bgcolor="PaleGreen">
 KJ
 </td>
 <td class="sKT" bgcolor="PaleGreen">
 KT
 </td>

 </tr>
 <tr>
 <td class="oAQ" bgcolor="PaleGoldenrod">
 AQ
 </td>
 <td class="oKQ" bgcolor="PaleGoldenrod">
 KQ
 </td>
 <td class="aQQ" bgcolor="PaleGoldenrod">
 QQ
 </td>
 <td class="sQJ" bgcolor="PaleGreen">
 QJ
 </td>
 <td class="sQT" bgcolor="PaleGreen">
 QT
 </td>

 </tr>
 <tr>
 <td class="oAJ" bgcolor="PaleGoldenrod">
 AJ
 </td>
 <td class="oKJ" bgcolor="PaleGoldenrod">
 KJ
 </td>
 <td class="oQJ" bgcolor="PaleGoldenrod">
 QJ
 </td>
 <td class="aJJ" bgcolor="#BEBEBE">
 JJ
 </td>
 <td class="sJT" bgcolor="PaleGreen">
 JT
 </td>

 </tr>

 </table>
 <input type="radio" name="COLOR" value="DarkGreen"  checked="checked">
 <label for="DarkGreen">DarkGreen</label>
 <input type="radio" name="COLOR" value="Indigo" >
 <label for="Indigo">Indigo</label>
 <input type="radio" name="COLOR" value="YellowGreen">
 <label for="YellowGreen">YellowGreen</label>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript