javascript - Custom hover tags like Thinglink -


i'm trying find way simulate thinglink does.

i attach picture can understand better. essentially, dot in picture, , when hover mouse, display text box.

my ideas begin are, tooltip within bootstrap, doesn't know sure if can make on picture...

thinglink picture

edit:

add actual code:

<div class="col-md-4 column wow fadeinright delay=1000ms">     <div id="tooltip1" data-toggle="tooltip" data-placement="top" title="keyword1">         <div id="tooltip2" data-toggle="tooltip" data-placement="left" title="keyword2">             <div id="tooltip3" data-toggle="tooltip" data-placement="bottom" title="keyword3">                 <img src="img/iphone_screenshot.png" alt="ios" />             </div         </div>     </div> </div>

solution:

thanks @wouter florijn added bootstrap tooltip , transparent img 16x16, beacuase needed tooltip work. (can't hover in empty zone...)

<img src="img/iphone_screenshot.png" alt="ios" /> <div class="dot" data-x="20%" data-y="25%"><a href="#" rel="tooltip" title="feature 1"><img src="img/dot_transparent.png"/></a></div> <div class="dot" data-x="80%" data-y="50%"><a href="#" rel="tooltip" title="feature 2"><img src="img/dot_transparent.png" /></a></div> <div class="dot" data-x="35%" data-y="80%"><a href="#" rel="tooltip" title="feature 3"><img src="img/dot_transparent.png" /></a></div> <div class="dot" data-x="55%" data-y="15%"><a href="#" rel="tooltip" title="feature 4"><img src="img/dot_transparent.png" /></a></div>

you need make container div picture , add number of absolutely positioned divs inside container.

it best position dots using js think.

then, add tooltips .dot divs using whatever want. jquery ui, bootstrap, foundation... or own code of course.

https://jsfiddle.net/7whlrjry/1/

html:

<div class="container">     <img src="..." />     <div class="dot" data-x="20%" data-y="25%"></div>     <div class="dot" data-x="80%" data-y="50%"></div>     <div class="dot" data-x="35%" data-y="80%"></div>     <div class="dot" data-x="55%" data-y="15%"></div> </div>

css:

.container {     position: relative;     max-width: 100%; } .container img {     max-width: 100%; } .dot {     position: absolute;     width: 16px;     height: 16px;     background-color: black;     border: 8px solid white;     border-radius: 99999px;     cursor: pointer; } .dot:hover {     background-color: white;     border: 8px solid black; }

js:

$(document).ready(function() {     $('.dot').each(function() {         $(this).css('left', $(this).data('x'));         $(this).css('top', $(this).data('y'));     }); });

Comments

Post a Comment

Popular posts from this blog

cakephp - simple blog with croogo -

i not problem, made simple blog in croogo, problem is not adding or modifying or delete, because arabic language ?? function add in controller `public function admin_add() { $this->set('title_for_layout', __('add part')); if (!empty($this->request->data)) { $this->part->create(); if ($this->part->save($this->request->data)) { $this->session->setflash(__('the part has been saved'), 'default', array('class' => 'success')); $this->redirect(array('action' => 'index'));//, $this->part->id)); } else { $this->session->setflash(__('the part not saved. please, try again.'), 'default', array('class' => 'error')); } } }` => model `class part extends appmodel { public $name = 'part'; var $belongst...
Read more

How to group boxplot outliers in gnuplot -

i have large set of data points. try plot them boxplot, of outliers exact same value , represented on line beside each other. found how set horizontal distance between outliers in gnuplot boxplot , doesn't much, apparently not possible. is possible group outliers together, print 1 point , print number in brackets beside indicate how many points there are? think make more readable in graph. for information, have 3 boxplots 1 x value , times 6 in 1 graph. using gnuplot 5 , played around pointsize, doesn't reduce distance anymore. hope can help! edit: set terminal pdf set output 'dat.pdf' file0 = 'dat1.dat' file1 = 'dat2.dat' file2 = 'dat3.dat' set pointsize 0.2 set notitle set xlabel 'x' set ylabel 'y' header = system('head -1 '.file0); n = words(header) set xtics ('' 1) set [i=1:n] xtics add (word(header, i) i) set style data boxplot plot file0 using (1-0.25):1:(0.2) boxplot lw 2 lc rgb '#8b0000...
Read more

bash - Performing variable substitution in a string -

i have string contains use of variable, , i'd substitute variable's value string. right best have is #!/bin/bash foo='$name; echo bar' name="the name" expanded="$(eval echo "$foo")" echo "$expanded" which has obvious defects: prints the name bar while i'd print the name; echo bar instead of eval can bash's regex matching bash's string replacement: foo='$name; echo bar' name="the name" [[ "$foo" =~ \$([[:alnum:]]+) ]] && s="${!bash_rematch[1]}" && expanded="${foo/\$${bash_rematch[1]}/$s}" echo "$expanded" name; echo bar
Read more