Menu icon Foundation

Designer | Repentigny, Qc

My Posts

No Content

My Comments

Eric Dumensil commented on Klevis Miho's post almost 5 years

Hi guys,

Last week a colleague of mine and I inspected how we could center the tooltip. It may not be the cleanest solution but we achieved it by change the 2 line below in foundation.tooltip.js

Line 201

 objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', target.offset().left - tip.width()/ 2 );

Line 208

 var left = target.offset().left - tip.outerWidth()/ 2 + target.outerWidth() / 2 ;

however, it have some weird behaviour when viewing tooltip on narrower window width like on iPad in portrait mode. I don't know if this is linked to the changes I made..

Hope this helps.

Eric Dumensil commented on Klevis Miho's post almost 5 years

Same issue here.

I'm trying to make the tooltip container centred with the link instead of having the tooltip always aligned to the left border of the link.

Eric Dumensil commented on Stéphane Richin's post almost 5 years

UP!

Même problème ici!

Same issue here!

Eric Dumensil commented on Eric Dumensil's post about 5 years

Bump, help please! :)

Eric Dumensil commented on Eric Dumensil's post about 5 years

Thank you!! :D I really feel like an huuuge nooob lol

Eric Dumensil commented on Eric Dumensil's post about 5 years

Thanks for the help @Nic Edwards.

But I don't see anything in the code pen link you posted :S

Eric Dumensil commented on Eric Dumensil's post about 5 years

      <div class="contain-to-grid fixed">
        <nav class="top-bar hide-for-medium-down" data-topbar>
        <div class="nav-bg"></div>
          <ul class="title-area">
              <li class="name">
                <a href="#"><img src="img/Beehivr-logo-white.svg" alt="Beehivr Logo" width="150px" ></a>
              </li>
          </ul>
          <section class="top-bar-section">
            <ul class="right">
              <li><a href="#">home</a></li>
              <li><a href="#">tour</a></li>
              <li class="has-dropdown not-click">
                <a href="#">platform</a>
                <ul class="dropdown">
                  <li><a href="#">Who Benefits</a></li>
                  <li><a href="#">Use Cases</a></li>
                </ul>
              </li>
              <li><a href="#">design studio</a></li>
              <li><a href="#">company</a></li>
              <li><a href="#">blog</a></li>
              <li><a class="small button round" id="request-top" href="#">request a demo</a></li>
            </ul>
          </section>
        </nav>
      </div>
/* TOP-BAR STYLING */

.top-bar {
  height: 65px;
  line-height: 65px;
  background-color:transparent;
  padding-right: 30px;
}

.top-bar .title-area{
  margin-left: 1.1em;
  margin-top:0.2em;
}

.top-bar-section .right{
  margin-top:0.2em;
}

.contain-to-grid{
  background-color: transparent;
  padding-top: 18px;
}

.contain-to-grid .top-bar{
  max-width: 73.438em;
}

.top-bar-section ul li{
  background: transparent;
}

.top-bar-section li:not(.has-form) a:not(.button){
  background: transparent;
  text-transform: uppercase;
}

.top-bar-section li:not(.has-form) a:not(.button):hover{
  background: transparent;
  background-color: transparent;
  color:#e30913;
}

.top-bar-section ul li > a.button {
  font-family: Bariol;
  font-weight: 400;
  margin-left: 15px;
  background-color: transparent;
  border: 2px solid #e30913;
  text-transform: uppercase;
  margin-top: 0px;
}

.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus{
  background-color: #e30913;

}

.top-bar-section ul li > a{
  font-family: Lato;
  font-weight: 300;
}

/* TOP-BAR DROPDOWN STYLING */

.dropdown{
  background-color: #e30913;
}

.top-bar-section ul li:hover:not(.has-form) > a:not(.button){
  background: none;
}

.top-bar-section .has-dropdown > a:not(.button):after{
  border: none;
  border-left-style: none;
  margin-right: 0;
  margin-top: 0;
  position: absolute;
  top: 0;
}

.top-bar-section .has-dropdown > a:not(.button){
  padding-right: 15px !important;
}

.top-bar-section li .dropdown{
  right: -1em !important;
}

.top-bar-section .dropdown li:not(.has-form) a:not(.button){
  background: #e30913;
}

.top-bar-section .dropdown{
  background: #e30913;
}

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Klevis Miho's post almost 5 years

Hi guys,

Last week a colleague of mine and I inspected how we could center the tooltip. It may not be the cleanest solution but we achieved it by change the 2 line below in foundation.tooltip.js

Line 201

 objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', target.offset().left - tip.width()/ 2 );

Line 208

 var left = target.offset().left - tip.outerWidth()/ 2 + target.outerWidth() / 2 ;

however, it have some weird behaviour when viewing tooltip on narrower window width like on iPad in portrait mode. I don't know if this is linked to the changes I made..

Hope this helps.

You commented on Klevis Miho's post almost 5 years

Same issue here.

I'm trying to make the tooltip container centred with the link instead of having the tooltip always aligned to the left border of the link.

You commented on Stéphane Richin's post almost 5 years

UP!

Même problème ici!

Same issue here!

You commented on Eric Dumensil's post about 5 years

Bump, help please! :)

You commented on Eric Dumensil's post about 5 years

Thank you!! :D I really feel like an huuuge nooob lol

You commented on Eric Dumensil's post about 5 years

Thanks for the help @Nic Edwards.

But I don't see anything in the code pen link you posted :S

You commented on Eric Dumensil's post about 5 years

      <div class="contain-to-grid fixed">
        <nav class="top-bar hide-for-medium-down" data-topbar>
        <div class="nav-bg"></div>
          <ul class="title-area">
              <li class="name">
                <a href="#"><img src="img/Beehivr-logo-white.svg" alt="Beehivr Logo" width="150px" ></a>
              </li>
          </ul>
          <section class="top-bar-section">
            <ul class="right">
              <li><a href="#">home</a></li>
              <li><a href="#">tour</a></li>
              <li class="has-dropdown not-click">
                <a href="#">platform</a>
                <ul class="dropdown">
                  <li><a href="#">Who Benefits</a></li>
                  <li><a href="#">Use Cases</a></li>
                </ul>
              </li>
              <li><a href="#">design studio</a></li>
              <li><a href="#">company</a></li>
              <li><a href="#">blog</a></li>
              <li><a class="small button round" id="request-top" href="#">request a demo</a></li>
            </ul>
          </section>
        </nav>
      </div>
/* TOP-BAR STYLING */

.top-bar {
  height: 65px;
  line-height: 65px;
  background-color:transparent;
  padding-right: 30px;
}

.top-bar .title-area{
  margin-left: 1.1em;
  margin-top:0.2em;
}

.top-bar-section .right{
  margin-top:0.2em;
}

.contain-to-grid{
  background-color: transparent;
  padding-top: 18px;
}

.contain-to-grid .top-bar{
  max-width: 73.438em;
}

.top-bar-section ul li{
  background: transparent;
}

.top-bar-section li:not(.has-form) a:not(.button){
  background: transparent;
  text-transform: uppercase;
}

.top-bar-section li:not(.has-form) a:not(.button):hover{
  background: transparent;
  background-color: transparent;
  color:#e30913;
}

.top-bar-section ul li > a.button {
  font-family: Bariol;
  font-weight: 400;
  margin-left: 15px;
  background-color: transparent;
  border: 2px solid #e30913;
  text-transform: uppercase;
  margin-top: 0px;
}

.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus{
  background-color: #e30913;

}

.top-bar-section ul li > a{
  font-family: Lato;
  font-weight: 300;
}

/* TOP-BAR DROPDOWN STYLING */

.dropdown{
  background-color: #e30913;
}

.top-bar-section ul li:hover:not(.has-form) > a:not(.button){
  background: none;
}

.top-bar-section .has-dropdown > a:not(.button):after{
  border: none;
  border-left-style: none;
  margin-right: 0;
  margin-top: 0;
  position: absolute;
  top: 0;
}

.top-bar-section .has-dropdown > a:not(.button){
  padding-right: 15px !important;
}

.top-bar-section li .dropdown{
  right: -1em !important;
}

.top-bar-section .dropdown li:not(.has-form) a:not(.button){
  background: #e30913;
}

.top-bar-section .dropdown{
  background: #e30913;
}

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content