0

I have html page, with many elements have tooltips.

The tooltips contain some explanations about the elements.

In my page, I have button - 'show explanations'. I want, on this button clicking, to show all the tooltips proactively , even that usually tooltip is shown only on element-mouse-over.

How can I show and hide tooltips proactively? (by javascript / html code. Optional- using jquery/knockout)?

user5260143
  • 1,048
  • 2
  • 12
  • 36
  • 1
    try looking at this SO question.. http://stackoverflow.com/questions/19129519/how-to-create-tooltip-without-javascript-using-only-inline-css – Hawk Jun 09 '14 at 12:31
  • Nothing, I didn't have any idea how to do it. – user5260143 Jun 09 '14 at 12:32
  • 1
    I bet you have some html. How do you store tooltips? Is it just a title attribute or something fancy? – Yury Tarabanko Jun 09 '14 at 12:33
  • I would toggle the visibility of tooltip with button click. – Godinall Jun 09 '14 at 12:34
  • Yes, I want use just title attribute. Not other thing, like in the question that Hawk suggested. – user5260143 Jun 09 '14 at 12:35
  • 1
    in Hawk's example, just do $('.tooltip').show() and tool tips will show up. You will need jquery though to use that pretty syntax. – Shaunak Jun 09 '14 at 12:37
  • 1
    @user, if they're "native" tooltips, then you may have difficulties getting them to open all at once (if you manage to get them to open in the first place). Some tooltip implementations only use a single widget for the entire document or even the entire *application*, relying on the fact that you normally cannot hover over two non-nested elements at the same time. – Frédéric Hamidi Jun 09 '14 at 12:38
  • Thank you very match. After I read Frederic comment, I decode using Hawk suggestions. – user5260143 Jun 09 '14 at 12:40
  • You don't need jquery for such a simple task actually. Check my answer. – Yury Tarabanko Jun 09 '14 at 12:47

1 Answers1

1

You can use pseudo element (:after) to mimic tooltips. Example: http://jsfiddle.net/tarabyte/3T3KX/

Code:

HTML

<div title="some title" class="tooltip">Text containing tooltip</div>
<div title="some title" class="tooltip">Text containing tooltip</div>
<div title="some title" class="tooltip">Text containing tooltip</div>
<button id="show">Show tips</button>

Some JS

document.getElementById('show').addEventListener('click', function(){
    document.body.classList.toggle('show')
}, false);

And CSS

.show .tooltip[title]:after { /*pseudo element*/
    display: block;
    position: absolute;
    content: attr(title);
    top: -10px;
    left: 20px;
    border: 1px solid black;
    font-size: 10px;
}
Yury Tarabanko
  • 44,270
  • 9
  • 84
  • 98
  • It is not good for me. Tooltip must be hover, not like simple visible/unvisible field. Do you have idea for me, how to improve Hawk suggestion, that tooltip-visible will be hapen on button-click? His suggestion has problem too: you cannot give nested element to input, and I need those tooltips for inputs, too. – user5260143 Jun 09 '14 at 13:21
  • "It is not good for me. " that sucks :). "Tooltip must be hover, not like simple visible/unvisible field." what does it mean? Tooltips are still visible on hover. – Yury Tarabanko Jun 09 '14 at 13:27
  • Yes, they are still visible on hover. I mean that I need the tooltip continue shown like toolip, even when it is shown by button-clicking. (tooltip is float on the element, and not stand near it). I hope you understand and sorry that I didn't explain my question better. – user5260143 Jun 09 '14 at 13:30
  • Well, use CSS and your imagination to make it look like a native one. If you are going to use any custom solution (jquery-tooltip or whatever) you will still need to style it. – Yury Tarabanko Jun 09 '14 at 13:33