php


How to display button in tooltip


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>
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>
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>

Related Links

Getting Controller does not exist after moving my controller to sub folder in laravel 5
Mysqli Count Two Data Type in one query
Invalid argument key “nameOfTheArgument” found symfony3 (Extending an abstract service)
Codecademy Functions, Part I PHP [duplicate]
Failed opening required '../vendor/autoload.php'
Compare between Two dates in php [duplicate]
Altering another document in Doctrine ODM PreUpdate event
FB access token is empty without any FB exception thrown from PHP SDK v5
Stream a PDF file in Laravel 5.2
BroadcastOn not firing in laravel 5.3?
How to execute a Symfony command as cron job?
use laravel Authentication in pure php scripts
show the data from complex json data in php
.htacces redirect subdomain to folder
Plesk horde mail error. Cannot allocate memory
Codeigniter 3 - can I get image upload's url from 3 images?

Categories

HOME
amazon-web-services
keyboard
tomcat
d3.js
redmine
compilation
braintree
ios-simulator
websocket
consul
portable-class-library
cypher
header
hyperledger
position
mithril.js
phpmqtt
minecraft
native-base
specifications
sharepoint-online
mutation-testing
getopenfilename
mailmerge
smartgwt
amazon-elb
google-cloud-logging
l20n
http-authentication
cpu-usage
spyder
angular2-highcharts
bsd
bosun
maven-surefire-plugin
pymongo
substring
nurbs
high-availability
spreadsheetgear
onchange
sfml
android-collapsingtoolbar
creation
grails-2.5
jfxtras
nppexec
formsauthenticationticket
praat
stat
flowchart
ejml
flipkart
coverage.py
vungle-ads
virtual-memory
latexml
julius-speech
moinmoin
scala-breeze
gestures
sonatype
sequence-diagram
test-data
jpda
ftp-client
maven-release-plugin
meld
unsigned
uibinder
utf-16
seadragon
django-validation
ui4j
ibm-was
asp.net-web-api-helppages
tidyr
phonegap-facebook-plugin
flurry-analytics
image-rotation
lync-2010
code39
proxy-server
cloo
particle-swarm
mute
stty
acceptance-testing
dibs
donut-chart
reentrancy
significant-digits
session-0-isolation
system-requirements
sfinae
system-information
pageheap
image-scanner
kolite
django-apps
vows
uipasteboard
outlook-2007-addin
odac
facebook-fbml
google-translator-toolkit
main-method

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App