How to display button in tooltip

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>

You will have to create a JS widget to do this (or edit the exiting one to use `innerHTML`). — tereško, May 13 '17 at 21:19
Not really, since this sort of functionality is non-trivial (that button of yours also does things). It would require me few hours of work to actually implement it in a decent state. — tereško, May 13 '17 at 21:21
And that aside, a tooltip should not contain "actionable things". You probably should look into changing the UI, because what you have now is breaking the [principle of least astonishment](https://en.wikipedia.org/wiki/Principle_of_least_astonishment). And you are not Apple, who can at least **HOPE** to get away wiht pulling shit like that. — tereško, May 13 '17 at 21:23
What I want to do is someting like on this site http://www.uw.edu.pl/ — Kapka, May 13 '17 at 21:25
What you see there is not a tooltip but a "modal dialog", that get's auto-show, is user's cursor stays on the Item for 1500ms (or something like that). It actually is a really bad idea. — tereško, May 13 '17 at 21:27
@ICE at a guess: he's a beginner, who is way in over his head. — tereško, May 13 '17 at 21:28

Dalin Huang · Answer 1 · 2017-05-13T21:48:25.353

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>

ICE · Accepted Answer · 2017-05-13T23:18:24.363

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>
  
   <a href="#">Box content 1</a>
   
   <ul class="tip">
    <li>
     This is tip content and this is <button>button1</button> in it
    </li>
   </ul>
  </li><li>
  
   <a href="#">Box content 2</a>
   
   <ul class="tip">
    <li>
     This is tip content and this is <button>button2</button> in it
    </li>
   </ul>
  
  </li><li>
  
   <a href="#">Box content 3</a>
   
   <ul class="tip">
    <li>
     This is tip content and this is <button>button3</button> in it
    </li>
   </ul>
  
  </li><li>
  
   <a href="#">Box content 4</a>
   
   <ul class="tip">
    <li>
     This is tip content and this is <button>button4</button> in it
    </li>
   </ul>
  
  </li>
  
 
 </ul>

I use
becouse it is only one element of "slider". You can see it here https://vimeo.com/217329508 — Kapka, May 13 '17 at 21:48
@Kapka Even if you are using `ul` `li` you are implementing it wrong. You have `ul` as a parent node of those `div`. **Element `div` not allowed as child of element `ul`.** — ICE, May 13 '17 at 21:56
So What if I like to format some text in element li ? Can I use span maybe? http://stackoverflow.com/questions/11755628/can-i-use-div-as-a-direct-child-of-ul — Kapka, May 13 '17 at 22:03
@Kapka I wrote an update for you. You should do `ul` `li` like that. and I wrote it like what you mentioned (uw.edu.pl) — ICE, May 13 '17 at 22:21
Thank You very much!!! It helped a lot. You are great. I don't know how to give You a point or something for help :-). — Kapka, May 13 '17 at 22:26
@Kapka Updated my answer with another solution for you. In the new solution you can move the mouse from current box content to the tip content. It uses complete list style. — ICE, May 13 '17 at 23:15

How to display button in tooltip

2 Answers2