[Resolved] using tooltips in element

[Author]

Posts

[davidm-13]

Tell us what you are trying to do?
I'm trying to create a tooltip for a column heading in table
Is there any documentation that you are following?

Is there a similar example that we can see?
hidden link
What is the link to your site?
hidden link

css:
[CODE]
/************** Tool Tip Styles ********************************/
.tool-tip {
display: inline-block;
position: relative;
margin-left: 0.5em;
}
.tool-tip .tool-tip__icon {
background: #27b1f0;
border-radius: 10px;
cursor: pointer;
display: inline-block;
font-style: italic;
font-family: times new roman;
height: 20px;
line-height: 1.3em;
text-align: center;
width: 20px;
}
.tool-tip .tool-tip__info {
display: none;
background: #262626;
border: 1px solid #27b1f0;
border-radius: 3px;
font-size: 0.875em;
padding: 1em;
position: absolute;
left: 30px;
top: -20px;
width: 250px;
z-index: 2;
}
.tool-tip .tool-tip__info:before, .tool-tip .tool-tip__info:after {
content: "";
position: absolute;
left: -10px;
top: 7px;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #27b1f0;
}
.tool-tip .tool-tip__info:after {
left: -8px;
border-right-color: #262626;
}
.tool-tip .tool-tip__info .info {
display: block;
}
.tool-tip .tool-tip__info .info__title {
color: #fa00f3;
}
.tool-tip:hover .tool-tip__info, .tool-tip:focus .tool-tip__info {
display: inline-block;
}

a:focus + .tool-tip .tool-tip__info {
display: inline-block;
}
article{
border-radius: 5px;
padding: 1em;
margin: 1em;
}
i{
font-style: normal;
}
a{
color: white;
text-decoration: none;
}
a:hover,
a:focus{
text-decoration: underline;
}
li{
margin: 5px 0;
}
[/CODE]

html:
[CODE]
<th>Actions
<div class="tooltip">
<i class="tool-tip__icon">i
<p class="tool-tip__info">
<span class="info"><span class="info__title">Label:</span> Kling Klong</span>
<span><span class="info__title">Most popular month:</span> August 2013</span>
</p>
</div>
</th>
[/CODE]

I've tried using several different examples but the tooltip icon never appears, what am I doing wrong?

Thanks for your help
David

[Nigel]

Hi David

I can't see the link to your site, it redirects to a log-in page.

When you say you are trying to add this to a table heading, is this a table you are generating with a View, having chosen table as the output format in the Loop Wizard?

I'll have to set up a test locally to see if I can get it to work, but I want to make sure I'm doing the same thing.

[davidm-13]

Hi Nigel,
I've removed the login.
Yes, the view with the tooltip problem: "Complaints list new table" ID 8752.

Thanks for your help
David

[Nigel]

Hi David

A couple of things, before I dig very deep into this.

Your console is littered with JS errors (screenshot).

You need to resolve those generally, but also they are relevant here with your CSS-only Tooltips because JS is used when adding custom CSS to the page in Views, and those errors appear to prevent the CSS being added, so your solution is simply not being applied.

Next, you seem to have several competing tooltip solutions.

Bootstrap comes with a tooltip solution, and this is already loaded on your site. (hidden link)

You are using a CSS-only solution, and you need to make sure the styles don't conflict. (Your solution uses the class "tool-tip" rather than Boostrap's "tooltip", but it looks like you mistakenly added a div with "tooltip".)

I also see traces of an alternative tooltip solution (jQuery Qtip), and you'll want to make sure that isn't conflicting either.

[davidm-13]

Hi Nigel,
Thanks very much for taking the time and pointing out all of the problems I need to correct, it's a great help. I'll work on them and let you know if I succeed to get the tool-tips working.
One question, what tool-tip solution would you recommend?

Thanks for your help
David

[Nigel]

You already have Bootstrap available, but your CSS-only solution also looks nice.

In either case it is a question of reproducing the required markup, including added class names, and with the second solution also adding the required CSS. Bootstrap requires JS to instantiate the tooltips.

I recall getting the Bootstrap tooltips to work before, but found it non-trivial.

So I would start with your CSS-only solution and try to get that to work, being careful to reproduce exactly the markup and class names required.