How to display button in tooltip - php

Question

I have a tooltip in my project.
What I like to do is add active button to my tooltip.
Problem is that the tooltip is displaying a HTML tags not a button...
Here is the effect of my work:-)
enter image description here
Bellow is my code.
Please if some one can help. Thank You.
/* Frame */
.frame {
height: 150px;
max-width: 1170px;
/*line-height: 130px;*/
/* overflow:visible !important;*/
}
.frame ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
font-size: 14px;
}
.frame ul li {
float: left;
width: 232px;
height: 100%;
margin: 0 2px 0 0;
padding: 0;
background: #f1f1f1;
color: #00b5f6;
text-align: center;
cursor: default;
display:flex;
}
.frame ul li:hover{
color: #fff;
background: #00b5f6;
}
/* setup tooltips */
.tooltip {
position: relative;
z-index:1;
}
li .tooltip{
overflow:visible;
}
.tooltip:before,
.tooltip:after {
position:absolute;
display:inline-block;
opacity: 0;
pointer-events: none;
width:225px;
}
.tooltip:after {
border-right: 6px solid transparent;
border-top: 6px solid #00b5f6;
border-left: 6px solid transparent;
content: '';
height: 0;
top: -5px;
left: 20px;
width: 0;
display:none;
}
.tooltip:before {
background: #00b5f6;
border-radius: 2px;
color: #fff;
content: attr(data-title);
font-size: 12px;
padding: 6px 10px;
top: 0px;
left: 0px;
white-space: nowrap;
height:118px;
max-width:212px !important;
display:block;
word-wrap: break-word;
text-align: left;
white-space: pre-line;
}
/* expand */
.tooltip.expand:before {
transform: scale3d(.2,.2,1);
transition: all .2s ease-in-out 0.5s;
}
.tooltip.expand:after {
transform: translate3d(0,6px,0);
transition: all .2s ease-in-out 0.5s;
}
.tooltip.expand:hover:before,
.tooltip.expand:hover:after {
opacity: 1;
transform: scale3d(1,1,1);
}
.date_event{
text-align:left; width:232px; position:absolute; padding: 5px 0 0 5px; font-style: italic; max-height:20px; z-index:-1;
}
.suwak{
width:232px; height:150px; margin-left:auto; margin-right:auto; overflow-y:visible; overflow-x:hidden; border:solid 1px #000;
}
.title_event{
font-size:16px; font-weight:bold; width:232px; height:130px; vertical-align: middle !important; display: table-cell !important; margin-left:auto; margin-right:auto;
}
<?php $tooltip = "Lorem ipsum dolor sit amet enim.";
$tooltip = $tooltip."<div class='btn_google'>google</div>"; ?>
<div class="suwak">
<div class="frame" id="basic">
<li class="tooltip expand" data-title="<?php echo $tooltip;?>">
<div class="date_event">02.02.2017</div>
<div style="text-align: center; width:232px;">
<div class="title_event">Some title</div>
</div>
</li>
</div>
</div>

Answer 1

That li is not need, just change it to div
Also why not just add a hidden div block as tooltip container, on hover show it (just like the tooltip):
.expand:hover>div {
display: none;
height: 148px;
width: 232px;
}
.mytitle {
display: none;
}
.expand:hover>.mytitle {
display: block;
background: red;
}
/* Frame */
.frame {
height: 150px;
max-width: 1170px;
/*line-height: 130px;*/
/* overflow:visible !important;*/
}
.frame ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
font-size: 14px;
}
.frame ul li {
float: left;
width: 232px;
height: 100%;
margin: 0 2px 0 0;
padding: 0;
background: #f1f1f1;
color: #00b5f6;
text-align: center;
cursor: default;
display: flex;
}
.frame ul li:hover {
color: #fff;
background: #00b5f6;
}
/* setup tooltips */
.tooltip {
position: relative;
z-index: 1;
}
li .tooltip {
overflow: visible;
}
.tooltip:before,
.tooltip:after {
position: absolute;
display: inline-block;
opacity: 0;
pointer-events: none;
width: 225px;
}
.tooltip:after {
border-right: 6px solid transparent;
border-top: 6px solid #00b5f6;
border-left: 6px solid transparent;
content: '';
height: 0;
top: -5px;
left: 20px;
width: 0;
display: none;
}
.tooltip:before {
background: #00b5f6;
border-radius: 2px;
color: #fff;
content: attr(data-title);
font-size: 12px;
padding: 6px 10px;
top: 0px;
left: 0px;
white-space: nowrap;
height: 118px;
max-width: 212px !important;
display: block;
word-wrap: break-word;
text-align: left;
white-space: pre-line;
}
/* expand */
.tooltip.expand:before {
transform: scale3d(.2, .2, 1);
transition: all .2s ease-in-out 0.5s;
}
.tooltip.expand:after {
transform: translate3d(0, 6px, 0);
transition: all .2s ease-in-out 0.5s;
}
.tooltip.expand:hover:before,
.tooltip.expand:hover:after {
opacity: 1;
transform: scale3d(1, 1, 1);
}
.date_event {
text-align: left;
width: 232px;
position: absolute;
padding: 5px 0 0 5px;
font-style: italic;
max-height: 20px;
z-index: -1;
}
.suwak {
width: 232px;
height: 150px;
margin-left: auto;
margin-right: auto;
overflow-y: visible;
overflow-x: hidden;
border: solid 1px #000;
}
.title_event {
font-size: 16px;
font-weight: bold;
width: 232px;
height: 130px;
vertical-align: middle !important;
display: table-cell !important;
margin-left: auto;
margin-right: auto;
}
.expand:hover>div {
display: none;
}
.mytitle {
height: 0px;
width: 0px;
display: none;
}
.expand:hover>.mytitle {
height: 150px;
width: 232px;
display: block;
background: red;
}
<div class="suwak">
<div class="frame" id="basic">
<div class="expand" data-title="">
<div class="mytitle">my title <button>123</button><button>123</button></div>
<div class="date_event">02.02.2017</div>
<div style="text-align: center; width:232px;">
<div class="title_event">Some title</div>
</div>
</div>
</div>
</div>

Answer 2

You can do this without using Javascript. Remove that li and do something like this in a simple way:
.box{
width: 200px;
height: 100px;
position: relative;
background-color: silver;
text-align: center;
}
.box:hover .tip{
display: block;
}
.tip{
display: none;
background-color: yellow;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="box">
<div class="tip">
This is tip content and this is <button>button</button> in it
</div>
Box content
</div>
UPDATE
from the link that you provided on your comment (uw.edu.pl) This is what you are trying to do:
ul{
list-style: none;
}
ul.main{
display: inline-block;
margin-top: 50px;
}
ul.main>li{
width: 200px;
height: auto;
position: relative;
background-color: silver;
text-align: center;
}
ul li ul{
display: none;
}
ul li a{
display: block;
height: 100%;
text-decoration: none;
color: white;
}
ul li:hover ul{
display: block;
}
ul.tip{
display: none;
background-color: yellow;
position: absolute;
bottom: 100%;
padding: 0;
height: auto;
left: 0;
right: 0;
z-index: 1;
}
<ul class="main">
<li>
Box content 1
<ul class="tip">
<li>
This is tip content and this is <button>button1</button> in it
</li>
</ul>
</li><li>
Box content 2
<ul class="tip">
<li>
This is tip content and this is <button>button2</button> in it
</li>
</ul>
</li><li>
Box content 3
<ul class="tip">
<li>
This is tip content and this is <button>button3</button> in it
</li>
</ul>
</li><li>
Box content 4
<ul class="tip">
<li>
This is tip content and this is <button>button4</button> in it
</li>
</ul>
</li>
</ul>